我试图在 Electron.js 中单击按钮时打开新窗口，但未捕获 ReferenceError: require is not defined
Posted
技术标签:
【中文标题】我试图在 Electron.js 中单击按钮时打开新窗口，但未捕获 ReferenceError: require is not defined【英文标题】：I tried to open new window on button click in Electron.js but Uncaught ReferenceError: require is not defined 【发布时间】：2021-12-25 20:03:46 【问题描述】：我尝试了多种解决方案来打开一个新窗口，第一次在 electron.js 中单击按钮时我在 require 未定义时遇到错误，nodeIntegration: true 帮助我解决了它，但现在 remote 和 @ 987654326@ 引起了问题。在电子的最新版本中打开新窗口的最佳方法是什么
index.js
const button = document.getElementById("notifyBtn");
button.addEventListener("click", () =>
createBrowserWindow();
);
function createBrowserWindow()
const remote = require("electron").remote;
const BrowserWindow = remote.BrowserWindow;
const win = new BrowserWindow(
height: 200,
width: 300,
);
win.loadFile("add.html");
main.js
const app, BrowserWindow, Menu = require("electron");
const shell = require("electron/common");
const path = require("path");
//creating window
function createWindow()
const win = new BrowserWindow(
width: 800,
height: 600,
webPreferences:
preload: path.join(__dirname, "preload.js"),
devTools: true,
nodeIntegration: true,
contextIsolation: false,
enableRemoteModule: true,
,
);
// loading index file to the window
win.loadFile("src/index.html");
win.webContents.openDevTools();
// setting top menu bar
const menu = Menu.buildFromTemplate([
label: "Menu",
submenu: [ label: "option 1" ],
submenu: [ label: "option 1" ],
submenu: [
label: "option 1" ,
label: "option 2" ,
label: "Link",
click()
shell.openExternal("https://www.google.com");
,
,
type: "separator" ,
label: "Exit",
click()
app.quit();
,
,
],
,
label: "Info" ,
]);
Menu.setApplicationMenu(menu);
//start a window
app.whenReady().then(() =>
createWindow();
);
// to Quit when window is closed
app.on("window-all-closed", function ()
if (process.platform !== "darwin") app.quit();
);
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<link rel="stylesheet" href="../assets/css/main.css" />
</head>
<body>
<div class="row">
<div class="price-contaier">
<div class="subtext">Current BTC USD</div>
<h1 id="price">loading...</h1>
</div>
<div id="goal-container">
<p>
<img src="" />
<div id="targetPrice">Choose a Traget Price</div>
</p>
</div>
<div id="right-container">
<button id="notifyBtn">Notify me when...</button>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
package.json
"name": "crypto-app",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts":
"start": "electron ."
,
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies":
"electron": "^15.3.0"
错误
【问题讨论】：
【参考方案1】：远程模块是removed in Electron 14。
您可以使用window.open API 从渲染器进程打开窗口：
window.open('https://github.com', '_blank', 'width=200,height=200')
见：https://www.electronjs.org/docs/latest/api/window-open#windowopenurl-framename-features
【讨论】：
以上是关于我试图在 Electron.js 中单击按钮时打开新窗口，但未捕获 ReferenceError: require is not defined的主要内容，如果未能解决你的问题，请参考以下文章