admin 管理员组

文章数量: 887021

在使用electron开发桌面程序的过程中，我们可能经常需要让electron程序中包含的链接在被点击后直接调用系统的默认浏览器打开，仔细看了文档的都知道其核心原理就是通过electron的shell模块中的openExternal方法来调用系统默认浏览器打开链接，但是对于其实现又有不同的方法，彻底的接管，选择性的接管，瞎 main介绍3中行之有效的方法。

1、在渲染进程中选择所有的a标签，覆盖a标签的默认点击方法，代码如下：

1

2

3

4

5

6

7

8

9

10

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、该方法与上一种方法类似，只不过换了一种角度来实现，这里打开连接并不在渲染进程中直接做，而是通过和主进程通信来告诉主进程调用系统浏览器打开链接，具体代码如下：

主进程代码：

1

2

3

4

5

6

7

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

  

...

ipcMain.on('open-url', (event, url) => {

    shell.openExternal(url);

});

...

渲染进程代码：

1

2

3

4

5

6

7

8

9

10

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事件来拦截所有的链接，具体代码：

1

2

3

4

5

6

7

8

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中实现调用默认浏览器打开链接，但都葛优优缺点，实际开发中可以根据需求来选择合适的方法。

赏

本文标签： 浏览器 方式 链接 Electron

版权声明：本文标题：electron用默认浏览器打开链接的3种实现方式 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1726854631h1040101.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。