如何访问电子中的DOM元素？

IT技术 javascript dom electron
2021-01-14 14:35:35

我正在尝试向index.html文件中的按钮添加功能如下：我有一个按钮元素index.html

<button id="auth-button">Authorize</button>

在main.js应用程序中，我有

require('crash-reporter').start();
console.log("oh yaeh!");
var mainWindow = null;

app.on('window-all-closed', function(){
    if(process.platform != 'darwin'){
        app.quit();
    }
});

app.on('ready',function(){
    mainWindow = new BrowserWindow({width:800, height : 600});
    mainWindow.loadUrl('file://' + __dirname + '/index.html');

    var authButton = document.getElementById("auth-button");
    authButton.addEventListener("click",function(){alert("clicked!");});

    mainWindow.openDevTools();

    mainWindow.on('closed',function(){
        mainWindow = null;
    });
});

但是出现如下错误： Uncaught Exception: ReferenceError: document is not defined

在构建电子应用程序时可以访问 DOM 对象吗？或者有没有其他替代方法可以为我提供所需的功能？

3个回答

DOM不能在主进程中访问，只能在它所属的渲染器中访问。

有一个ipcmodule可用于主进程和渲染器进程，允许通过同步/异步消息在这两者之间进行通信。

您还可以使用远程module从渲染器调用主进程 API，但没有任何方法可以让您以相反的方式执行此操作。

如果您需要在主进程中运行某些内容作为对用户操作的响应，请使用ipcmodule来调用该函数，然后您可以将结果返回给渲染器，也可以使用ipc.

代码更新以反映实际 (v0.37.8) API，正如@Wolfgang 在评论中所建议的，如果您坚持使用旧版本的 Electron，请参阅已弃用 API 的编辑历史记录。

示例脚本index.html：

var ipc = require('electron').ipcRenderer;
var authButton = document.getElementById('auth-button');
authButton.addEventListener('click', function(){
    ipc.once('actionReply', function(event, response){
        processResponse(response);
    })
    ipc.send('invokeAction', 'someData');
});

在主要过程中：

var ipc = require('electron').ipcMain;

ipc.on('invokeAction', function(event, data){
    var result = processData(data);
    event.sender.send('actionReply', result);
});
@ROAL：是的，确实可以使用.once(). Electron 的 IPC 是一个标准的 Node.js EventEmitter。此外，require('ipc')已折旧，现在require('electron').ipcMain和require('electron').ipcRenderer。
2021-03-14 14:35:35
在 Linux 15.04 上使用 io.js v2.3.1 和 Electron 0.29.1
2021-03-17 14:35:35
当我在 index.html 中使用 require 时会出现以下错误。`Uncaught ReferenceError: require is not defined知道为什么吗？
2021-03-21 14:35:35
您似乎忘记包含错误。我目前无法访问电子，但我认为require()应该在渲染器过程中可用。编辑：好的，现在到了。
2021-03-30 14:35:35
@ant_1618 您使用的是哪个版本的 Electron？另外，在什么操作系统上？
2021-04-09 14:35:35

您可以使用webContents.executeJavaScript(code[, userGesture, callback]) API 来执行 JavaScript 代码。

例如：

mainWindow.loadUrl('file://' + __dirname + '/index.html');
mainWindow.webContents.on('did-finish-load', ()=>{
    let code = `var authButton = document.getElementById("auth-button");
            authButton.addEventListener("click",function(){alert("clicked!");});`;
    mainWindow.webContents.executeJavaScript(code);
});
这样做时最好不要允许任何类型的用户输入或外部数据。
2021-03-14 14:35:35

如本教程所述：

在 Electron 中，我们有多种方式在主进程和渲染器进程之间进行通信，例如用于发送消息的 ipcRenderer 和 ipcMain module，以及用于 RPC 样式通信的远程module。

因此，您可以按照https://github.com/electron/electron-api-demos 中的示例进行操作。您应该js为每个html. 在该js文件中，您可以require随时使用。

代码renderer.js：

const ipc = require('electron').ipcRenderer

const asyncMsgBtn = document.getElementById('async-msg')

asyncMsgBtn.addEventListener('click', function () {
  ipc.send('asynchronous-message', 'ping')
})

ipc.on('asynchronous-reply', function (event, arg) {
  const message = `Asynchronous message reply: ${arg}`
  document.getElementById('async-reply').innerHTML = message
})

代码ipc.html：

<script type="text/javascript">
  require('./renderer-process/communication/sync-msg')
  require('./renderer-process/communication/async-msg')
  require('./renderer-process/communication/invisible-msg')
</script>
其它你可能感兴趣的问题
上一篇你如何在 JavaScript 中的不同基数之间转换数字？ 下一篇在 render 方法中使用 promise 渲染 React 组件