【问题标题】：manipulate the DOM in electron with a menu item使用菜单项在电子中操作 DOM
【发布时间】：2017-03-01 19:11:47
【问题描述】：

我希望创建一个对话框（模式窗口），当用户单击我的应用程序菜单上的“关于”链接时将显示该对话框。我在想一些事情：

let menuTemplate = {
  menu: [
    {
      label: 'About',
      click () {
        let about = document.querySelector('.hidden');
        about.classList.remove('hidden');
      }
    }
  ]
}

const menu = Menu.buildFromTemplate(menuTemplate)
Menu.setApplicationMenu(menu)

我收到的消息是“未定义文档”，我认为这是因为电子应用程序的菜单位于主进程中，而页面的 DOM 位于渲染器进程中。

我知道主进程和远程进程之间有一种通信方式，但这让我很困惑。谁能告诉我接下来的步骤是什么？

ps 我正在使用 NodeJS 和 Express with Electron

【问题讨论】：

标签： node.js electron

【解决方案1】：

现在有两种方法可以考虑：一种可以在主进程中完成，另一种需要跨进程消息传递。

主进程（单独）

使用主进程，我们可以在我们的require语句中导入dialog类，然后使用方法（正如Arun在另一个答案中所建议的那样）：

dialog.showMessageBox([browserWindow, ]options[, callback])

这将显示操作系统本机的对话框。您甚至可能会发现您想将它用于人们在您的渲染器进程中执行的某些操作，但我将在接下来继续。

进程间通信

您的托盘菜单将在您的主进程中被实例化，但事件的结果必须发生在渲染器进程中以显示您的模态。

在主进程中，我们可以导入ipcMain，而在渲染器进程中——你猜对了，ipcRenderer。

在您的点击事件中，您可以使用BrowserWindow#webContents#send 方法向您的渲染发送事件，我们称之为“ShowMyModal”：

myWindowInstance.webContents.send('ShowMyModal');

现在，在主进程中，我们可以使用ipcMain 对象监听这个事件。

ipcMain.on('ShowMyModal', function () {
  // the modal event has fired!

  $('#myModal').show();
});

您可能会发现这类东西的进程间通信。习惯了来回抛出 IPC 事件，它真正展示了电子及其渲染器过程的美丽。

【讨论】：

我通过在菜单文件中使用 webcontents.send() 并在前端使用的 JavaScript 文件中使用 IPC 调用来使用您答案的修改版本。

【解决方案2】：

您可以使用电子对话框轻松创建对话框/弹出窗口。

dialog.showMessageBox([browserWindow, ]options[, callback])

请查看此文档以获取更多信息： https://electron.atom.io/docs/api/dialog/

【讨论】：

感谢您提醒我有关电子对话的信息。我会在以后的项目中记住这一点。