如何在Electron中实现多个子窗口同时打开不被覆盖？

问题根因 #

Electron 中默认对同源、相同窗口名的 window.open 调用会复用已有的窗口实例，你所有子窗口都使用_blank作为窗口名，就会出现后打开的窗口覆盖之前窗口的问题。 #

修复方案 #

方案1：主进程侧配置（无需修改渲染端代码，推荐）

直接在主进程创建主窗口的逻辑中，新增setWindowOpenHandler处理方法，强制每次window.open请求都生成新的独立窗口：

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

app.whenReady(() => {
  const mainWin = new BrowserWindow({
    // 保留你原有主窗口的所有配置项不变
    webPreferences: {
      // 原有权限配置保持不变，无需修改
    }
  })

  // 新增核心配置
  mainWin.webContents.setWindowOpenHandler((openParams) => {
    return {
      action: 'allow',
      // 每个新窗口都生成独立的实例配置
      overrideBrowserWindowOptions: {
        width: 600,
        height: 450,
        // 子窗口的权限配置和主窗口保持一致即可
        webPreferences: {}
      }
    }
  })

  mainWin.loadURL('你原有主窗口的加载地址')
})

如果配置后仍然有复用问题，检查主窗口webPreferences中是否手动设置了nativeWindowOpen: false，Electron 15及以上版本默认该参数为true，手动改为true即可兼容原生window.open的独立窗口逻辑。

方案2：渲染侧修改调用参数（可修改渲染代码时可选）

如果有权限修改主窗口的前端代码，给每次window.open调用的第二个参数传入唯一的窗口标识，不要统一用_blank：

// 调整前（会触发窗口复用）
window.open('/page1', '_blank')
window.open('/page2', '_blank')

// 调整后（每个窗口有唯一标识，不会复用）
window.open('/page1', 'child_win_1')
window.open('/page2', 'child_win_2')

内容的提问来源于stack exchange，提问作者Wenfang Du