如何在 electron webview 中启用节点集成？

Question

我用 Electron 构建了一个应用程序，我尝试使用 webview 来显示从我的磁盘加载的文件，我需要在 webview 中进行节点集成。虽然它记录在电子文档 here 中，但我无法让它工作。我使用 main.js 文件创建了一个测试项目，它创建了一个 BrowserWindow，我在其中加载了我的 index.html 和 index.js 文件。 index.js 文件创建了一个加载了我的文件的 webview，文件是 webview.html 和 webview.js。我在 webview.js 中调用 require 并且我可以在 DevTools 中看到它给出了错误

Uncaught ReferenceError: require is not defined
at webview.js:2

这是我的测试文件，我遗漏了什么或删除了这个功能？我正在使用 Electron ^12.0.2

main.js

const { app, BrowserWindow, BrowserView } = require('electron')

function createWindow () {
   let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
        nodeIntegration: true,
        contextIsolation: false,
        webviewTag: true,
        nodeIntegrationInWorker: true,
        nodeIntegrationInSubFrames: true
    }
  })

  win.loadFile('index.html')
  return win;
}

app.whenReady().then(() => {
    let win = createWindow();
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
}

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body>
    <div class="root">
    </div>
    <script src="index.js" charset="utf-8"></script>
</body>
</html>

index.js

function createWebview(id, url) {
        //creates a webview with the id of the tab and the url loaded
        let webview = document.createElement("webview");
        webview.setAttribute("id", id);
        webview.setAttribute("src", url);
        webview.setAttribute("nodeintegration", "");
        webview.setAttribute("preload", "./pre.js")
        webview.addEventListener('dom-ready', () => {
            webview.openDevTools();
        });
        console.log(webview);
        return webview;
}
document.querySelector(".root").appendChild(createWebview("web", `file://${__dirname}/webview.html`));

webview.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        test
        <script src="webview.js" charset="utf-8"></script>
    </body>
</html>

webview.js

console.log("test");
//a require to test the functionality
const { app, BrowserWindow, ipcMain, Menu, MenuItem } = require('electron');

编辑 1：预加载脚本为空。

Answer 1

经过深思熟虑，我找到了解决方案，如果 webview 类似于 BrowserWindow，那么我需要在 webview 的 webPreferences 对象中禁用 contextIsolation。这绝对是需要添加到电子文档中的东西。我像这样更改 index.js 文件

function createWebview(id, url) {
        //creates a webview with the id of the tab and the url loaded
        let webview = document.createElement("webview");
        webview.setAttribute("id", id);
        webview.setAttribute("src", url);
        webview.setAttribute("nodeintegration", "");
        webview.setAttribute("webpreferences", "contextIsolation=false");
        webview.addEventListener('dom-ready', () => {
            webview.openDevTools();
        });
        console.log(webview);
        return webview;
}
document.querySelector(".root").appendChild(createWebview("web", `file://${__dirname}/webview.html`));

Answer 2

只需在webPreference对象中添加以下两个属性即可在所有包含webView的js文件中启用nodeIntegration

webPreferences: {
  nodeIntegration: true,
  contextIsolation: false,
  nativeWindowOpen: true,
  enableRemoteModule: true,
  sandbox:false,
  nodeIntegrationInSubFrames:true, //for subContent nodeIntegration Enable
  webviewTag:true //for webView
}

不要使用 webview 不是使用 webView 显示外部内容的好主意它会影响性能。!

查看下面关于 webView 的文档

如何在 electron webview 中启用节点集成？

How to enable nodeintegration in electron webview?

javascript

webview

node.js

electron