当 contextIsolation 设置为 true 时，如何从 HTML 文件访问 require

Question

我试图让电子进入这个 HTML 文件，但require未定义：

<script>
    const electron = require("electron");
    const {icpRenderer} = electron;

    const form = document.querySelector("form");
    form.addEventListener("submit", submitForm);

    function submitForm(e){
        e.preventDefault();
        const item = document.querySelector("#item").value;
    }
</script>

对于用于防止安全警告的 Web 首选项，我将nodeIntegration为 True，并将contextIsolation为 True。 我怎样才能通过这个文件得到require ？

---

完整的源代码

指南视频添加脚本标签

在main.js ：

function createAddWindow(){
    addWindow = new BrowserWindow({
        width: 300,
        height: 200,
        title: "Add Inventory Item",
        webPreferences: {
            nodeIntegration: true,
            worldSafeExecuteJavaScript: true,
            contextIsolation: true
        }
    });

    addWindow.loadURL(url.format({
        pathname: path.join(__dirname, "addWindow.html"),
        protocol: "file",
        slashes: true
    }));

    addWindow.on("close", function(){
        addWindow = null;
    })
}

Answer 1

我遇到的主要问题是，启用contextIsolation无法使用require 。

要访问ipcRenderer了contextIsolation ipcRenderer ，预加载文件与contextBridge一起使用以从ipcRenderer公开某些功能：

preload.js

const { contextBridge, ipcRenderer } = require("electron");

contextBridge.exposeInMainWorld("myAPI", {
    ipcSend: (...args) => ipcRenderer.send(...args),

    ipcOn: (key, handler) => ipcRenderer.on(key, (event, ...args) => handler(...args))
});

main.js

function createAddWindow(){
    subWindowOpen = true;
    addWindow = new BrowserWindow({
        width: 400,
        height: 300,
        title: "Add Inventory Item",
        webPreferences: {
            worldSafeExecuteJavaScript: true,
            contextIsolation: true,
            preload: path.join(__dirname, "preload.js")
        }
    });

    addWindow.loadURL(url.format({
        pathname: path.join(__dirname, "addWindow.html"),
        protocol: "file",
        slashes: true
    }));
}

addWindow.html

<script>
    myAPI.ipcSend("item:add", item);
</script>

可以在不启用contextIsolation情况下使用nodeIntegration ，但这被认为是不安全的。 最好只公开某些功能而不是整个对象。