ElectronJS：未捕获的 TypeError：无法读取未定义的属性“BrowserWindow”/“getCurrentWindow”答案

【问题标题】：ElectronJS: Uncaught TypeError: Cannot read property "BrowserWindow" / "getCurrentWindow" of undefinedElectronJS：未捕获的 TypeError：无法读取未定义的属性“BrowserWindow”/“getCurrentWindow”
【发布时间】：2021-03-06 07:52:00
【问题描述】：

首先，我知道这是一个只有初学者才会问的问题，但是在经历了 50 多种不同的解决方案、卸载 npm 和安装 yarn 之后，我不得不问这个令人难以置信的愚蠢问题。为什么这不起作用？我想使用 ElectronJS 实现一个简单的标题栏，我遇到的问题是按钮（关闭/最小化/最大化）不起作用。我收到的错误如下：

最小化错误：titlebar.js:16 Uncaught TypeError: Cannot read property 'BrowserWindow' of undefined at HTMLButtonElement.maximizeApp (titlebar.js:16)

最大化错误：titlebar.js:16 Uncaught TypeError: Cannot read property 'BrowserWindow' of undefined at HTMLButtonElement.maximizeApp (titlebar.js:16)

退出错误：titlebar.js:21 Uncaught TypeError: Cannot read property 'getCurrentWindow' of undefined at HTMLButtonElement.quitApp (titlebar.js:21)

我用来控制它的 JavaScript 文件称为 titlebar.js。就是这样：

const remote_v = require("electron").remote;

var minimize_v = document.getElementById("minimize");
var maximize_v = document.getElementById("maximize");
var quit_v = document.getElementById("quit");

minimize_v.addEventListener("click",minimizeApp);
maximize_v.addEventListener("click",maximizeApp);
quit_v.addEventListener("click",quitApp);

function minimizeApp(){
  remote_v.BrowserWindow.getFocusedWindow().minimize();
}

function maximizeApp(){
  remote_v.BrowserWindow.getFocusedWindow().maximize();
}

function quitApp(){
  remote_v.getCurrentWindow().close();
}

由于许多其他类似问题的修复都在渲染过程中，这是 HTML 文件：

<!DOCTYPE html>
    <head>
        <title>Visionizer</title>

        <link rel="stylesheet" href="css/editor.css">
        <link rel="stylesheet" href="css/titlebar.css" >
    </head>
    <body>
        <div class="container">         
            <div class="titlebar titlebarStyle">  
                <div class="windowTitle"> Visionizer </div>
                <div class="windowControls windowControlsStyle">
                    <button id="minimize">-</button>
                    <button id="maximize">[]</button>
                    <button id="quit">x</button>
                </div>
            </div>
            <div class="editorScreen">
            </div>
        </div>
        <script src="js/titlebar.js"></script>
    </body>
</html>

关于这个的奇怪之处在于，经过多次尝试，我决定从 github 的教程中复制代码，我认为我的代码中可能有一个错误，我太笨了，看不到。它仍然没有运行。我使用npm 卸载了该软件包，并使用yarn global add electron@latest 使用yarn 安装了它，因为有人建议这样做。

我根本不知道这是否重要，但我也会从下面的 main.js 文件中复制我的代码，因为我想确保我包含了所有内容：

const { app, BrowserWindow } = require('electron')

function createWindow () {
  const win = new BrowserWindow({
    width: 900,
    height: 800,
    minHeight: 650,
    minWidth: 600,
    frame: false,
    webPreferences: {
      nodeIntegration: true
    }
  })

  win.loadFile('editor.html')
  win.webContents.openDevTools()
}

app.whenReady().then(createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

这是 package.json 文件：

{
  "dependencies": {
    "electron": "^11.0.2"
  },
  "name": "*******",
  "version": "1.0.0",
  "description": "**********",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },  
  "author": "************",
  "license": "MIT"
}

网上的一些问题被回答说项目启动错误，我听从了他们的建议，我使用yarn start命令启动我的项目

感谢您阅读本文。

【问题讨论】：

标签： javascript node.js json windows electron

【解决方案1】：

看起来您的 remote 模块是 undefined。

您可能希望在主窗口的webPreferences 中设置enableRemoteModule: true，或者更好的是，完全废弃remote 并在主进程中执行这些操作。

remote 模块在 Electron 10 中被禁用。

【讨论】：