Question

我是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：未定义文档”

编辑：我的英语很糟糕，我使用谷歌翻译，抱歉。

Answer 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。

从我的观点来看，没有最好的＆＃34;关于将菜单创建的代码放在哪里作为主要方式和渲染过程的方法有上下两个方面。

如何访问Electron中的DOM元素？

1 个答案: