electron 渲染进程按钮创建新window，报BrowserWindow is not a constructor错误；

在 Electron 中，有主进程和渲染进程
主进程：在Node.js环境中运行—意味着能够使用require模块并使用所有Node.js API
渲染进程：每个electron应用都会为每个打开的BrowserWindow（与每个网页嵌入）生成一个单独的渲染器进程。
windows 中展示的界面通过渲染器进程渲染且一个应用可以有多个渲染进程
因此，一个浏览器窗口的所有的用户界面和应用功能，都应该是在网页开发上使用相同的工具和规范来写（如html，css，js）
因此这也意味着渲染器无权直接访问require或其他Node.js API.

BrowserWindow 是一个只能在主进程中使用的类，而不能直接在渲染进程中创建。因此，当你在渲染进程中尝试直接使用 BrowserWindow 创建新窗口时，会出现 BrowserWindow is not a constructor 的错误。

以下是几种解决方法：

方法 1：通过 IPC 通信

在渲染进程中通过 IPC 向主进程发送消息，主进程接收到消息后创建新窗口。这是推荐的方式，因为它符合 Electron 的设计。

主进程代码（main.js）

const { app, BrowserWindow, ipcMain } = require('electron');
let mainWindow = null;

const createWindow = () => {
  mainWindow = new BrowserWindow({
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
    },
  });
  mainWindow.loadFile('index.html');
};

app.on('ready', createWindow);

ipcMain.on('create-new-window', () => {
  const newWindow = new BrowserWindow({
    width: 400,
    height: 300,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
    },
  });
  newWindow.loadFile('new-window.html');
});

渲染进程代码（index.html）

<button id="newWindow">创建窗口button>
<script>
  const { ipcRenderer } = require('electron');
  document.getElementById('newWindow').addEventListener('click', () => {
    ipcRenderer.send('create-new-window');
  });
script>

方法 2：使用 @electron/remote 模块

虽然 Electron 官方不推荐使用 @electron/remote，但可以通过它在渲染进程中直接创建 BrowserWindow。

主进程代码

const { app, BrowserWindow } = require('electron');
require('@electron/remote/main').initialize();

let mainWindow = null;

const createWindow = () => {
  mainWindow = new BrowserWindow({
    webPreferences: {
      enableRemoteModule: true,
      contextIsolation: false,
    },
  });
  require('@electron/remote/main').enable(mainWindow.webContents);
  mainWindow.loadFile('index.html');
};

app.on('ready', createWindow);

渲染进程代码

const { BrowserWindow } = require('@electron/remote');
document.getElementById('newWindow').addEventListener('click', () => {
  const newWindow = new BrowserWindow({
    width: 400,
    height: 300,
  });
  newWindow.loadFile('new-window.html');
});

方法 3：使用 window.open

如果需要从渲染进程直接打开新窗口，可以使用 window.open 方法，并通过 webContents.setWindowOpenHandler 在主进程中自定义窗口的创建。

主进程代码

const { app, BrowserWindow } = require('electron');
let mainWindow = null;

const createWindow = () => {
  mainWindow = new BrowserWindow({
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
    },
  });
  mainWindow.loadFile('index.html');

  mainWindow.webContents.setWindowOpenHandler((details) => {
    const newWindow = new BrowserWindow({
      width: 400,
      height: 300,
      webPreferences: {
        nodeIntegration: true,
        contextIsolation: false,
      },
    });
    newWindow.loadURL(details.url);
    return { action: 'deny' }; // 阻止默认行为
  });
};

app.on('ready', createWindow);

渲染进程代码

<button id="newWindow">创建窗口button>
<script>
  document.getElementById('newWindow').addEventListener('click', () => {
    window.open('new-window.html', '_blank');
  });
script>

总结

• 推荐使用方法 1，通过 IPC 通信，符合 Electron 的设计，安全性更高。
• 如果需要快速实现，可以使用方法 2，但需要注意 @electron/remote 的安全性和未来兼容性。
• 方法 3 更适合需要从渲染进程直接打开窗口的场景，但需要在主进程中进行严格控制。