Electron.js中重新打开已命名弹窗时无法聚焦该如何解决？

根因 #

你遇到的二次打开子窗口无法聚焦是Electron的已知特性：

1. 复用同名窗口时，前端通过window.open拿到的窗口对象和原生层的窗口状态不同步，前端调用focus()的优先级低于主窗口的焦点抢占逻辑
2. 你在子窗口配置中指定了parent: win，子窗口的焦点逻辑会被父窗口绑定，默认父窗口优先级更高

修复步骤 #

1. 主进程（electron.js）修改 #

新增子窗口缓存逻辑，主动接管子窗口的唤起、聚焦操作：

// 全局缓存已打开的子窗口
const childWindows = new Map()

function createWindow() {
  const win = new BrowserWindow({
    width: 400,
    height: 700,
    webPreferences: {
      nodeIntegration: true,
      nativeWindowOpen: true, // 保留该配置，不要关闭
      preload: path.join(__dirname, "/../build/preload.js"),
    },
  });
  const pubUrl = "https://---";
  win.loadURL(pubUrl);

  win.webContents.setWindowOpenHandler((details) => {
    const windowName = details.frameName
    // 已打开过该窗口，直接唤起聚焦，不需要新开
    if (childWindows.has(windowName)) {
      const targetWin = childWindows.get(windowName)
      targetWin.show()
      targetWin.focus()
      targetWin.moveTop()
      return { action: 'deny' }
    }
    // 新开窗口逻辑
    return {
      action: "allow",
      overrideBrowserWindowOptions: {
        width: 400, // 不要直接继承父窗口所有配置，按需指定参数
        height: 700,
        webPreferences: {
          nodeIntegration: true,
          nativeWindowOpen: true,
          preload: path.join(__dirname, "/../build/preload.js"),
        },
        parent: win, // 如果不需要子窗口始终置顶在父窗口上，可以去掉该配置
      },
    };
  });

  // 监听新窗口创建事件，存入缓存
  win.webContents.on('did-create-window', (childWin, details) => {
    const windowName = details.frameName
    childWindows.set(windowName, childWin)
    // 子窗口关闭时清除缓存
    childWin.on('closed', () => {
      childWindows.delete(windowName)
    })
    // 子窗口显示时自动聚焦
    childWin.on('show', () => {
      childWin.focus()
    })
  })
}

2. 渲染进程（chatList.js）修改 #

如果不需要兼容纯浏览器场景，可以直接去掉前端的focus()调用，完全交给主进程处理，避免重复调用冲突：

const onClickBtn = useCallback(
  (chat) => {
    window.open(
      `/chatting/${chat.url}`,
      chat.url,
      "",
      true
    );
  },
  []
);

如果需要保留纯浏览器兼容，可加少量延迟确保窗口已初始化后再调用focus：

const onClickBtn = useCallback(
  (chat) => {
    const winObj = window.open(
      `/chatting/${chat.url}`,
      chat.url,
      "",
      true
    );
    setTimeout(() => {
      winObj?.focus()
    }, 100)
  },
  []
);

内容的提问来源于stack exchange，提问作者Gayoung Yeom