Question

如何将数据从我的 main.js 发送到我的 index.html (Electron)

2021-07-01

2426

javascript node.js electron

我是 JavaScript 和 Electron 的完全初学者，仅供您参考。

我想我已经找遍了大多数地方，但我没有找到任何东西。

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>??</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="main">
        <button id="get-data" type="submit">Get Data</button>
    </div>

    <script src="script.js"></script>
</body>

</html>

main.js

const { app, BrowserWindow } = require("electron");
const ipc = require("electron").ipcMain;

app.whenReady().then(() => {
    const window = new BrowserWindow({
        "center": true,
        "width": 500,
        "height": 800,
        "webPreferences": {
            "nodeIntegration": true
        }
    });
    window.loadFile("index.html");
});

ipc.on("uhhm", event => {
    event.sender.send("ok", "Hello World!");
});

script.js

const ipc = require("electron").ipcRenderer;
const getDataBtn = document.getElementById("get-data");

getDataBtn.addEventListener("click", () => {
    ipc.send("uhhm");
    ipc.once("ok", data => {
        getDataBtn.innerHTML = "Moving On... " + data;
    });
});

我收到此错误：

Uncaught ReferenceError: require is not defined
    at script.js:1

我不知道该怎么办

有什么建议吗？

Answer 1

如果您使用的是 >= 5 版本的 Electron，则需要启用 nodeIntegration 和 contextIsolation 参数，如下所示：

app.on('ready', () => {
    mainWindow = new BrowserWindow({
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
        }
    });
});

Answer 2

我使用 Electron Framework 一段时间时遇到过这个问题，我需要在渲染器进程和主进程之间进行 IPC 通信。渲染器进程位于脚本标记之间的 HTML 文件中，并生成相同的错误。

const {ipcRenderer} = require('electron')
//throws the Uncaught ReferenceError: require is not defined

对于你的情况：


const ipc = require("electron").ipcRenderer;

你必须通过在浏览器窗口（嵌入此 HTML 文件的位置）最初在主进程中创建时将 Node.js 集成指定为 true 来解决这个问题。

function createWindow() {

    // Create a new window
   const window = new BrowserWindow({
        width: 300,
        height: 200,

        // The lines below solved the issue
        webPreferences: {
            nodeIntegration: true
        }
})}

这为我解决了这个问题。解决方案已在此处提出。