从前端javascript文件使用电子ipcRenender [英] Using the electron ipcRenderer from a front-end javascript file
本文介绍了从前端javascript文件使用电子ipcRenender的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在学习使用Electron，在尝试让我的应用程序与前端通信时，我知道需要使用ipcRenderer获取对DOM元素的引用，然后将该信息传递给ipcMain。
我尝试遵循建议的许多建议here和here，但是这两个示例都使用require('electron').ipcMain，并且每当我尝试在HTML中包含将与前端交互的脚本时，从Uncaught ReferenceError: require is not defined开始没有任何反应。我已经找了几个小时了，还没有找到任何解决方案-所以很明显我做错了什么。
我的main.js非常简单，我只需创建我的窗口，然后创建一个IPC监听器，如下所示：
const { app, BrowserWindow } = require("electron");
const ipc = require('electron').ipcMain;
function createWindow() {
const window = new BrowserWindow({
transparent: true,
frame: false,
resizable: false,
center: true,
width: 410,
height: 550,
});
window.loadFile("index.html");
}
app.whenReady().then(createWindow);
ipc.on('invokeAction', (event, data) => {
var result = "test result!";
event.sender.send('actionReply', result);
})
在我希望用来操作DOM的文件中，我尝试获取元素ID，然后添加一个事件侦听器，如下所示：
const ipc = require('electron').ipcRenderer;
const helper = require("./api");
var authenticate_button = ipcRenderer.getElementById("authenticate-button");
var authButton = document.getElementById("authenticate-button");
authButton.addEventListener("click", () => {
ipc.once('actionReply', (event, response) => {
console.log("Hello world!");
})
ipc.send('invokeAction');
});
function onAuthenticateClick() {
helper.authenticateLogin(api_public, api_secret, access_public, access_secret);
}
最后，我的HTML只包含一个我希望将事件侦听器附加到的按钮：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Project Test</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="main-container">
<button id="authenticate-button" type="submit" onclick="">Authenticate</button>
<p id="status-label">Not Authenticated</p>
</div>
<script src="script.js"></script>
</body>
</html>
如果有人能帮我指出如何使此基本功能正常工作的正确方向，那将是非常有帮助的！
推荐答案
未定义require，因为您没有在窗口上启用nodeIntegration。在您的窗口配置中将其设置为true：
const window = new BrowserWindow({
transparent: true,
frame: false,
resizable: false,
center: true,
width: 410,
height: 550,
webPreferences: {
nodeIntegration: true
}
})
这篇关于从前端javascript文件使用电子ipcRenender的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
