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

问题描述

我正试图使电子进入此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>

对于网络偏好设置，我将nodeIntegration设置为True，将contextIsolation设置为True，用于防止安全警告。如何通过此文件获取require？

---

Full source code

Guide Video Adding Script tags

在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;
    })
}

解决方法

我遇到的主要问题是启用了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代替，但这被认为是不安全的。最好只公开某些功能，而不要公开整个对象。