解决 Electron 中 window.open 打开新窗口的各种“坑”

嘿，各位开发者们！今天我们要聊聊在使用 Electron 时遇到的一个经典问题：如何正确地使用 window.open 来打开新窗口？ 这听起来似乎很简单，但实际上却充满了各种"惊喜"（或者说"惊吓"）。别担心，经过一番探索与实践，我将带领大家一起揭开这些谜题，并提供一些实用的解决方案。

开篇小故事

想象一下这样一个场景：你正在开发一个基于 Electron 的桌面应用程序，需要从主窗口中通过 window.open() 打开一个新的窗口。一切看起来都很顺利，直到你运行程序------白屏出现了！不仅如此，有时候还会莫名其妙地弹出两个窗口，更糟糕的是，当你试图关闭窗口时，应用仿佛陷入了无尽的循环中无法自拔。如果你也曾经历过这样的困扰，那么这篇文章就是为你准备的！

问题一：白屏 + 网络报错

原因分析

Electron 对 window.open() 的实现并不像浏览器那样直接。它实际上是由 BrowserWindowProxy 类模拟出来的。这就意味着，默认情况下，新窗口并不会自动加载内容，除非你在主进程中进行了适当的配置。

解决方案

首先，我们需要在主进程（通常是 main.js）中设置 webContents.setWindowOpenHandler() 方法。这个方法允许我们控制新窗口的行为，并确保其能够正常加载内容。

javascript 复制代码

mainWindow.webContents.setWindowOpenHandler(({ url }) => {
  return {
    action: 'allow',
    overrideBrowserWindowOptions: {
      width: 1000,
      height: 600,
      webPreferences: {
        nodeIntegration: true,
        contextIsolation: false,
        webSecurity: false // 开发阶段可以关闭，生产建议开启
      }
    }
  };
});

这里的关键是返回 { action: 'allow' } 并且为新窗口指定合适的 webPreferences 配置。如果需要最大化窗口而不是全屏显示，可以通过监听 did-finish-load 事件来调用 maximize() 方法。

问题二：意外打开了两个窗口

原因分析

有时我们会发现，点击一次按钮竟然会打开两个窗口！这是因为我们在手动创建窗口的同时又返回了 { action: 'allow' }。这会导致 Electron 自己再创建一个窗口，从而产生重复窗口的问题。

解决方案

解决办法很简单：只需返回 { action: 'deny' } 即可。这样就告诉 Electron 不要自己再创建窗口了，因为我们已经处理过了。

javascript 复制代码

return { action: 'deny' };

问题三：关闭窗口时陷入死循环

原因分析

当我们在 close 事件中使用对话框询问用户是否真的想要退出应用时，如果不小心处理不当，可能会导致应用陷入一种看似无法结束的状态------窗口不关闭，对话框反复出现。

解决方案

为了避免这种情况的发生，在确认用户意图后，我们应该先移除当前窗口的 close 事件监听器，然后再调用 win.close() 和 app.quit()。

javascript 复制代码

win.on('close', (event) => {
  event.preventDefault();
  
  dialog.showMessageBox(win, {
    type: 'question',
    buttons: ['取消', '确定'],
    message: '你确定要退出吗？'
  }).then(result => {
    if (result.response === 1) {
      win.removeAllListeners('close');
      win.close();
      app.quit();
    }
  });
});

结语

虽然 Electron 提供了强大的功能来构建跨平台的桌面应用程序，但在使用某些特性时也需要特别小心。希望通过这篇文章，能帮助大家更好地理解和解决 window.open 相关的问题。记住，无论是面对白屏、重复窗口还是死循环，只要掌握了正确的姿势，就没有克服不了的困难！

希望这篇博客不仅能帮你解决问题，还能让你在开发 Electron 应用的过程中少走弯路，多些乐趣。祝编程愉快！😊