如何在电子 webview 中启用节点集成？
Posted
技术标签:
【中文标题】如何在电子 webview 中启用节点集成？【英文标题】：How to enable nodeintegration in electron webview? 【发布时间】：2021-06-21 13:54:37 【问题描述】：我用 Electron 构建了一个应用程序，我尝试使用 webview 来显示从我的磁盘加载的文件，我需要在 webview 中进行 nodeintegration。虽然它记录在电子文档here 中，但我无法让它工作。 我使用 main.js 文件创建了一个测试项目，该文件创建了一个 BrowserWindow，我在其中加载了我的 index.html 和 index.js 文件。 index.js 文件创建一个加载了我的文件的 webview，该文件是带有 webview.js 的 webview.html。我在 webview.js 中调用 require ，我可以在 DevTools 中看到它给出了错误
Uncaught ReferenceError: require is not defined
at webview.js:2
这是我的测试文件，我缺少什么或删除了此功能？ 我正在使用电子 ^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：预加载脚本为空。
【问题讨论】：
【参考方案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`));
【讨论】：
谢谢，这肯定需要在官方文档中！【参考方案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 的文档
【讨论】：
以上是关于如何在电子 webview 中启用节点集成？的主要内容，如果未能解决你的问题，请参考以下文章
如何在 WebView 中启用 GoogleTV 上的 Flash