Question

我正在尝试建立一个简单的Electron项目，但无法解决此问题。我有一个文件add.js，该文件用于向按钮添加事件监听器以关闭无框架浏览器窗口。我将add.js文件通过脚本标签导入到HTML中，如下所示：

 <script src="add.js"></script>

add.js文件仅包含此事件侦听器：

const electron = require('electron')
const remote = electron.remote
const closeBtn = document.getElementById('closeBtn')

closeBtn.addEventListener('click', (event) => {
    let window = remote.getCurrentWindow();
    window.close();
})

如果需要，这里是index.js，单击事件侦听器可打开此窗口：

const electron = require('electron');
const path = require('path');
const BrowserWindow = electron.remote.BrowserWindow;

const notifyBtn = document.getElementById('notifyBtn');

notifyBtn.addEventListener('click', (event) => {
    const modalPath = path.join('file://', __dirname, 'add.html')
    let win = new BrowserWindow({
        alwaysOnTop: true,
        frame: false,
        transparent: true,
        width: 400,
        height: 200
    })
    win.loadURL(modalPath)
    win.show()
    win.webContents.openDevTools();

    win.on('close', () => win = null)
})

我遇到的问题是无框浏览器窗口可以很好地打开，但是我立即收到“ Uncaught ReferenceError：”，并且JS代码无法加载。

我尝试在此处查找问题（stackoverflow），但答案表明这是由于尝试在浏览器中运行节点程序引起的。但是，我上面包含的index.js代码工作正常，没有错误。

这也是HTML文件的代码，以防万一我发疯：

index.html：

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8" />
    <title>BTCAlert</title>
    <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/images/up.svg"><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>

add.html：

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <link rel="stylesheet" href="../assets/css/main.css">
        <link rel="stylesheet" href="../assets/css/add.css">
    </head>

    <body>
        <p class="notify">Notify me when BTC reaches..</p>

        <div class="row2">
            <div>
                <input id="notifyVal" placeholder="USD">
            </div>
            <button id="updateBtn">Update</button>
        </div>

        <a id="closeBtn">Close Window</a><br>

        </div>
        <script src="add.js"></script>
    </body>

</html>

非常感谢您的帮助。

Answer 1

require（）函数不能在客户端使用。... 如果您想在客户端使用它，则可以在任何地方使用require.js或head.js。

Answer 2

添加

webPreferences: {
            nodeIntegration: true
},

为新的BrowserWindow实例为我解决了此问题。

未捕获的ReferenceError：在add.js：1上未定义require

2 个答案: