当前位置：首页 > news >正文

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

news 来源：原创 2025/8/16 7:51:55

在 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 更适合需要从渲染进程直接打开窗口的场景，但需要在主进程中进行严格控制。

方法 1：通过 IPC 通信

主进程代码（main.js）

渲染进程代码（index.html）

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

主进程代码

渲染进程代码

方法 3：使用 window.open

主进程代码

渲染进程代码

总结

相关文章：

主进程代码（`main.js`）

渲染进程代码（`index.html`）

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

方法 3：使用 `window.open`