【发布时间】：2021-03-20 00:24:06
【问题描述】：
我正在处理this tutorial。根据文档，我稍微重新编写了代码以使其适合 Electron 11。最重要的是index.js文件如下：
const { BrowserWindow } = require('electron');
const path = require('path');
const notifyBtn = document.getElementById('notifyBtn');
notifyBtn.addEventListener('click', (event) => {
const modalPath = path.join('file://', __dirname, 'add.html');
let win = new BrowserWindow({
width: 400,
height: 200,
webPreferences: {
nodeIntegration: true,
enableRemoteModule: true
}
});
win.on('close', () => { win = null });
win.loadURL(modalPath);
win.show();
});
上面的代码检查是否点击了 index.html 文件中的按钮并创建了新的 BrowserWindow 放置 add.html 内容的位置。这是 index.html 代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
<link rel="stylesheet" href="../assets/css/main.css">
</head>
<body>
<div class="row">
<div id="price-container">
<p class="subtext">Current BTC USD</p>
<h1 id="price">Loading...</h1>
</div>
<div id="goal-container">
<p><img src="../assets/img/up.png" alt=""><span id="targetPrice">Choose a Target Price</span></p>
</div>
<div id="right-container">
<button id="notifyBtn">Notify me when...</button>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
当应用程序运行并尝试单击按钮时，我在 DevTools 控制台中收到以下错误：
Uncaught TypeError: BrowserWindow is not a constructor
at HTMLButtonElement.<anonymous>
你能告诉我为什么会发生这个错误吗？我是电子的新人。提前感谢您的所有回答！
【问题讨论】：
-
您的主脚本在节点上下文中运行，并打开 BrowserWindow，即 Chrome 实例。但是，您问题中的代码没有；它在浏览器内部运行。你为什么要尝试从第一个内部打开一个新的 Chrome 实例？如果这确实是您想要的，您必须向节点代码发送回一条消息并在那里打开 BrowserWindows。
-
我不知道我是否对你有好处，但这不是 main.js 文件。 main.js 实际上与文档示例中的相同。上面的代码来自文件，该文件应该提供显示新 BrowserWindow（不是主应用程序 BrowserWindow）的事件。
-
我知道，我假设您问题中的 JS 代码是由
<script src="index.js"></script>加载的，对吗？这就是它不起作用的原因，请参阅here。据我所知，您正在尝试从Renderer脚本运行Main代码。同样，为什么要从第一个窗口中打开第二个窗口？因为这就是你想要做的。如果你想在点击按钮时导航到add.html，你只需要window.location = "add.html"; -
老实说，我不知道为什么 add.html 应该作为另一个窗口打开 - 我正在阅读教程（链接在上面的问题中）和这就是本教程所包含的内容：D 但是我想将此功能设为新窗口，以便了解如何在将来使其变得更好。
-
我也不知道，我认为你一开始也不想这样做，但这就是你的代码试图做的事情，因为我假设你只是复制了主要部分进入你的渲染器脚本而不理解为什么这不起作用（我也会冒险并声称教程没有告诉你这样做，但我不会看一个小时）。无论如何，下面的误导性答案确实教会了您如何从渲染器上下文向主上下文发送消息，所以我想这一切都解决了:)
标签： javascript electron