电子节点集成无效，电子行为也很奇怪 [英] Electron nodeIntegration not working, also general weird Electron behavior
问题描述
我是Electron的新手，我真的一直在努力使其工作.我遇到无法解释的行为，因此，得出以下结论:我无法让Electron和html之间的通讯正常工作
未捕获的ReferenceError:需求未定义".在网站内部，即使我有nodeIntegration:true
文件树:./index.htmlindex.jspackage-lock.jsonpackage.jsonnode_modules/ index.js:
const electronic = require("electron");const Ffmpeg ＝ require("fluent-ffmpeg")；const CmdExec = require('child_process');const {应用程序，BrowserWindow，ipcMain} =电子;函数createWindow(){//如果我将主窗口ini放在这里，然后调用app.on("ready"，createWindow());应用程式说//在准备之前无法创建窗口"，即使我只是将功能从准备就绪"内部移到了此处.}app.on('ready'，()=> {mainWindow = new BrowserWindow({webPreferences:{nodeIntegration:正确}});mainWindow.loadURL(`$ {__ dirname}/index.html`);});ipcMain.on("video:submit"，(事件，路径)=> {CmdExec.exec("echo hello"，(value)＝> {console.log(value)})；}); html:
< html>< head><元字符集="utf-8">< meta http-equiv =与X-UA兼容"；content ="IE = edge"< title></title><元名称=描述"；content ="<元名称=视口"内容＝宽度＝设备宽度，初始比例＝ 1".< link rel ="stylesheet"href ="</head><身体>< h1>欢迎！</h1>< script src =""异步延迟</script>< form action ="">< div>< br>< label for ="</label><输入类型=文件"；accept =视频/*"name ="id ="</div>< button type =提交">获取信息</button></form>< script>const电子＝ require(电子")；electronic.send('perform-action'，args);document.querySelector("form").addEventListener("submit"，(event)=> {event.preventDefault();const {path} = document.querySelector("input").files [0];window.api.send("video:submit"，路径)；});//我尝试过在stackoverflow上找到多个方法，不要以为我正确地实现了它们//尽管</script></body></html> package.json:
{名称":"media_encoder"，版本":"1.0.0&"，" description":"，"main":"index.js"，脚本":{电子":"electron".}，作者":"，许可证":"ISC"，依赖项":{电子":"^ 12.0.0"；}} Electron 12现在默认为 contextIsolation 改为 true ，这会禁用Node(此处是关于此更改的讨论. nodeIntegration 的价值将在以后的Electron版本中删除.
解决此问题的最简单方法是仅禁用上下文隔离:
mainWindow = new BrowserWindow({webPreferences:{nodeIntegration:正确，contextIsolation:错误}}); 话虽如此，出于安全原因，您可能要考虑保持启用 contextIsolation .请参阅此文档，以解释为什么此功能增强了应用程序的安全性.
I'm new to Electron, and I've really been struggling with getting it to work. I'm experiencing behavior I cannot explain, so here's a sum: I cannot get the communication between Electron and the html to work
"Uncaught ReferenceError: require is not defined" inside the website, even though I have nodeIntegration:true
File Tree:
./
index.html
index.js
package-lock.json
package.json
node_modules/
index.js:
const electron = require("electron");
const Ffmpeg = require("fluent-ffmpeg");
const CmdExec = require('child_process');
const {
app,
BrowserWindow,
ipcMain
} = electron;
function createWindow() {
//If I put the main window ini into here, and then call app.on("ready", createWindow()); app says
//"Cant create window before ready", even though I just moved the funcion from inside ready to here..
}
app.on('ready', () => {
mainWindow = new BrowserWindow({
webPreferences: {
nodeIntegration: true
}
});
mainWindow.loadURL(`${__dirname}/index.html`);
});
ipcMain.on("video:submit", (event, path) =>{
CmdExec.exec("echo hello", (value)=>{console.log(value)});
});
html:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
</head>
<body>
<h1>WELCOME!</h1>
<script src="" async defer></script>
<form action="">
<div>
<br>
<label for=""></label>
<input type="file" accept="video/*" name="" id="">
</div>
<button type="submit">get info</button>
</form>
<script>
const electron = require("electron");
electron.send('perform-action', args);
document.querySelector("form").addEventListener("submit", (event) => {
event.preventDefault();
const {path} = document.querySelector("input").files[0];
window.api.send("video:submit", path);
});
//Tried multiple methos Ive found on stackoverflow,, dont think I implemented them right
//though
</script>
</body>
</html>
package.json:
{
"name": "media_encoder",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"electron": "electron ."
},
"author": "",
"license": "ISC",
"dependencies": {
"electron": "^12.0.0"
}
}
Electron 12 is now defaulting contextIsolation to true, which disables Node (here are the release notes; and here's the PR).
Here's a discussion of this change. nodeIntegration for what it's worth is going to be removed in a future Electron version.
The easiest way to fix this is to simply disable context isolation:
mainWindow = new BrowserWindow({
webPreferences: {
nodeIntegration: true,
contextIsolation: false
}
});
That being said, you might want to consider keeping contextIsolation enabled for security reasons. See this document explaining why this feature bolsters the security of your application.
这篇关于电子节点集成无效，电子行为也很奇怪的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
