时间戳

首页 > 解决方案 > 当 contextIsolation 设置为 true 时，如何从 HTML 文件访问 require

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

问题描述

我正在尝试将电子放入此 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，并且设置为 True。contextIsolation我怎样才能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;
    })
}

标签： javascripthtmlnode.jselectronrequirejs

解决方案

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

要访问启用ipcRenderer，contextIsolation预加载文件用于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>

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

推荐阅读