如何访问 Electron 中的 DOM 元素？答案

【问题标题】：How do I access the DOM elements in Electron?如何访问 Electron 中的 DOM 元素？
【发布时间】：2018-11-02 19:50:55
【问题描述】：

我是 Electron 的新手，我正在尝试通过单击菜单来执行一项功能。这是我的例子。

index.html

<!DOCTYPE html>
<html lang="pt-br" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Electron</title>
    <script src="main.js"></script>
  </head>
  <body>
    <input type="text" name="campo" id="campo" value="">
    <button type="button" name="funcao" onclick="funcao()">Função</button> <br /><br />
    <input type="text" name="url" id="url">
  </body>
</html>

在本例中，在“url”输入中输入内容并单击按钮将显示在“campo”输入中输入的内容。我想做的就是做同样的事情，但是点击“funcao”菜单。

main.js（部分菜单，功能如下）

 {
    label: 'Função',
    click () { funcao(); }
  },

function funcao() {
  document.getElementById("campo").value = document.getElementById("url").value;
}

错误是这样的：

"ReferenceError: 文档未定义"

编辑：我的英语不好，我用谷歌翻译，抱歉。

【问题讨论】：

How to access DOM elements in electron?的可能重复

标签： javascript html dom electron

【解决方案1】：

Electron 有两个进程，main 和 render 进程。主要过程基本上是所有繁重的工作和应用程序设置本身发生的地方。另一方面，渲染过程是所有 HTML 渲染发生的地方。通常你有一个主进程，每个 BrowserWindow、WebView、……都有它自己的渲染进程。

这里有个问题，主进程不知道渲染的 DOM。但是，您可以通过IPC messages 在主进程和渲染进程之间进行通信。

有关详细信息，我强烈推荐有关应用程序架构的文档 https://electronjs.org/docs/tutorial/application-architecture

选项 A：

在您的情况下，当您从主进程创建菜单时，您无权访问渲染进程 DOM。您需要在单击处理程序中做的是向您的 BrowserWindow 发送 IPC 消息。在那里你听电话并触发funcao();

文档中的改造示例：

// In main process.
  const {ipcMain} = require('electron')
  const mainWindow = ... // reference to the BrowserWindow

  mainWindow.webContents.send('asynchronous-message', 'ping')

// In renderer process (web page).
  const {ipcRenderer} = require('electron')

  ipcRenderer.on('asynchronous-message', (event, arg) => {
    console.log(arg) // prints "ping"
  })

选项 B：

只需在渲染过程中创建菜单，您就可以访问窗口对象和所有其他浏览器 API。

从我的角度来看，没有“最好”的方式将菜单创建代码作为主要和渲染过程放在哪里，这既有优点也有缺点。

【讨论】：

昨天我在电子文档中发现了一件事，我使用了webContents.executeJavaScript，这正是我想要的。但无论如何，我感谢你。据你所知，我这样做了：在 mainWindow 我做了：mainWindow.webContents.executeJavaScript('alert(document.getElementById("campo").value)')