electron用默認瀏覽器打開鏈接的3種實現方式

在使用electron開發桌面程序的過程中，我們可能經常需要讓electron程序中包含的鏈接在被點擊后直接調用系統的默認瀏覽器打開，仔細看了文檔的都知道其核心原理就是通過electron的shell模塊中的openExternal方法來調用系統默認瀏覽器打開鏈接，但是對於其實現又有不同的方法，徹底的接管，選擇性的接管，瞎 main介紹3中行之有效的方法。

1、在渲染進程中選擇所有的a標簽，覆蓋a標簽的默認點擊方法，代碼如下：

const { shell } = require('electron');
  
const links = document.querySelectorAll('a[href]')；
links.forEach(link => {
    link.addEventListener('click', e => {
        const url = link.getAttribute('href');
        e.preventDefault();
        shell.openExternal(url);
    });
});

這種方法的優點是可以精確控制，比如我們可以控制部分鏈接用系統瀏覽器打開，部分鏈接在electron直接打開，缺點就是這個方式只能接管自己可以維護的網頁，不能更改第三方網頁中鏈接的打開方式。

2、該方法與上一種方法類似，只不過換了一種角度來實現，這里打開連接並不在渲染進程中直接做，而是通過和主進程通信來告訴主進程調用系統瀏覽器打開鏈接，具體代碼如下：

主進程代碼：

const { app, BrowserWindow, shell, ipcMain } = require('electron');
  
...
ipcMain.on('open-url', (event, url) => {
    shell.openExternal(url);
});
...

渲染進程代碼：

const { shell, ipcRender } = require('electron');
  
const links = document.querySelectorAll('a[href]')；
links.forEach(link => {
    link.addEventListener('click', e => {
        const url = link.getAttribute('href');
        e.preventDefault();
        ipcRender.send('open-url', url);
    });
});

上面說了這種方法和上一種方法實現的切入點不太一樣，所以和上面的方法有一樣的優缺點，對於第三方網站或者iframe中的鏈接就力所不能及了，那么如何讓iframe中的鏈接也能直接調用系統默認瀏覽器打開呢？這就是我們要介紹的似3種方式了。

3、通過在主進程中監聽webContents的new-window事件來攔截所有的鏈接，具體代碼：

const { shell, app } = require('electron');
  
app.on('web-contents-created', (e, webContents) => {
    webContents.on('new-window', (event, url) => {
        event.preventDefault();
        shell.openExternal(url);
    });
});

這種方式接管了所有鏈接的打開方式，優點就是可以處理iframe中或第三方網站鏈接的打開方式，缺點也很明顯，不能單獨控制那一類鏈接通過默認瀏覽器打開，哪一類鏈接通過electron直接打開。

以上3種方法都能在electron中實現調用默認瀏覽器打開鏈接，但都葛優優缺點，實際開發中可以根據需求來選擇合適的方法。

 

來自：https://www.deanhan.cn/electron-url-open-in-default-browser.html