Electron点击按钮打开加载不同HTML文件的新窗口问题求助

核心问题 #

你当前的代码是将打开新窗口的逻辑直接写在了初始化流程中（比如主进程启动时、渲染进程DOM加载完成后立即执行），而非绑定到按钮的点击事件上，导致程序一启动就自动打开新窗口。

两种可行实现方案 #

方案1：渲染进程绑定点击事件（使用window.open） #

修改index.html

给按钮添加标识，然后绑定点击事件，仅在点击时执行窗口打开逻辑：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>主窗口</title>
</head>
<body>
    <button id="openNewWinBtn">打开新窗口</button>

    <script>
        // 给按钮绑定点击事件
        document.getElementById('openNewWinBtn').addEventListener('click', () => {
            // 替换为你的目标HTML文件路径，确保路径正确
            window.open('./newWindow.html', '_blank', 'width=800,height=600');
        });
    </script>
</body>
</html>

修改main.js

需要在主窗口配置中开启nativeWindowOpen，否则Electron会拦截渲染进程的window.open调用：

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

function createWindow() {
    const mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
            nativeWindowOpen: true // 必须开启此配置
        }
    });

    mainWindow.loadFile('index.html');
}

app.whenReady().then(() => {
    createWindow();

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

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

方案2：主进程创建新窗口（通过IPC通信） #

适合需要对新窗口进行更精细控制的场景：

修改index.html

通过IPC向主进程发送打开新窗口的请求：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>主窗口</title>
</head>
<body>
    <button id="openNewWinBtn">打开新窗口</button>

    <script>
        const { ipcRenderer } = require('electron');
        document.getElementById('openNewWinBtn').addEventListener('click', () => {
            ipcRenderer.send('open-new-window');
        });
    </script>
</body>
</html>

修改main.js

主进程监听IPC事件，收到请求后创建新窗口：

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

function createWindow() {
    const mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false
        }
    });

    mainWindow.loadFile('index.html');
}

// 监听渲染进程的IPC请求，创建新窗口
ipcMain.on('open-new-window', () => {
    const newWindow = new BrowserWindow({
        width: 600,
        height: 400,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false
        }
    });
    newWindow.loadFile('newWindow.html'); // 替换为你的目标HTML文件路径
});

app.whenReady().then(() => {
    createWindow();

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

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

注意事项 #

• 确保目标HTML文件（如newWindow.html）的路径正确，可与主文件放在同一目录，或使用绝对路径
• 若使用Electron 12+版本，contextIsolation默认开启，如需在渲染进程使用Node API，可设为false，或通过预加载脚本（preload）实现更安全的隔离
• 禁止将打开窗口的代码直接写在初始化逻辑中，必须绑定到按钮的click事件触发

内容的提问来源于stack exchange，提问作者Ichor Dragon