嘿，各位開發者們！今天我們要聊聊在使用 Electron 時遇到的一個經典問題：如何正確地使用 window.open 來打開新窗口？ 這聽起來似乎很簡單，但實際上卻充滿了各種“驚喜”（或者說“驚嚇”）。別擔心，經過一番探索與實踐，我將帶領大家一起揭開這些謎題，并提供一些實用的解決方案。

開篇小故事

想象一下這樣一個場景：你正在開發一個基于 Electron 的桌面應用程序，需要從主窗口中通過 window.open() 打開一個新的窗口。一切看起來都很順利，直到你運行程序——白屏出現了！不僅如此，有時候還會莫名其妙地彈出兩個窗口，更糟糕的是，當你試圖關閉窗口時，應用仿佛陷入了無盡的循環中無法自拔。如果你也曾經歷過這樣的困擾，那么這篇文章就是為你準備的！

問題一：白屏 + 網絡報錯

原因分析

Electron 對 window.open() 的實現并不像瀏覽器那樣直接。它實際上是由 BrowserWindowProxy 類模擬出來的。這就意味著，默認情況下，新窗口并不會自動加載內容，除非你在主進程中進行了適當的配置。

解決方案

首先，我們需要在主進程（通常是 main.js）中設置 webContents.setWindowOpenHandler() 方法。這個方法允許我們控制新窗口的行為，并確保其能夠正常加載內容。

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 不要自己再創建窗口了，因為我們已經處理過了。

return { action: 'deny' };

問題三：關閉窗口時陷入死循環

原因分析

當我們在 close 事件中使用對話框詢問用戶是否真的想要退出應用時，如果不小心處理不當，可能會導致應用陷入一種看似無法結束的狀態——窗口不關閉，對話框反復出現。

解決方案

為了避免這種情況的發生，在確認用戶意圖后，我們應該先移除當前窗口的 close 事件監聽器，然后再調用 win.close() 和 app.quit()。

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 應用的過程中少走彎路，多些樂趣。祝編程愉快！😊