【Electron】打开链接的正确方式

3,736 阅读3分钟

在 Electron 应用程序中,打开外部链接是一项常见的任务。本文将介绍几种打开链接的方式,并重点介绍使用 shell 模块打开链接的最佳实践。

Electron 打开链接的几种方式

一、使用 shell 模块

介绍

shell 模块是 Electron 自带的一个模块,提供了一组能力来操作操作系统的本地功能。其中,shell.openExternal() 方法可以用于打开一个外部链接,并会自动选择最适合的方式来打开链接。

除了 shell.openExternal() 方法外,还有:

  • shell.openPath() 方法可以打开本地文件或目录
  • shell.moveItemToTrash() 方法可以将指定的文件或目录移动到回收站。

参数

  • activate: 一个布尔值,表示是否激活默认浏览器窗口(默认为true)。如果设置为false,则在打开链接时不会自动激活默认浏览器窗口。
  • workingDirectory: 一个字符串,表示应该将默认工作目录设置为哪个路径。这个选项通常用于在文件管理器中打开文件夹时指定要使用的起始目录。

打开链接

需要注意的是,在使用 shell.openExternal() 方法打开链接时,比如 http://www.xxxx.com ,会唤起默认的浏览器应用程序。如果你不希望打开浏览器应用程序,而是在 Electron 应用程序中内置一个浏览器窗口来显示链接内容,可以使用 BrowserWindowwebContents 模块。

协议唤醒

当你使用 shell.openExternal() 方法打开一个应用协议链接时,它通常不会像打开 http https 链接时那样启动默认浏览器,并在其中加载链接。相反,它会尝试通过系统将这个链接交给相应的应用程序处理。所以,如果你想通过打开协议链接唤醒其他应用的话,它会直接执行,而不是先启动或者激活浏览器。

异步

最后,需要注意的是,shell.openExternal() 方法是异步的,因此要使用 Promise 或回调函数来处理操作结果。

// 打开外部链接并处理结果
shell.openExternal('https://www.example.com')
  .then(() => console.log('打开链接成功'))
  .catch((err) => console.error('打开链接失败', err));

二、使用 BrowserWindowwebContents 模块

如果你想在 Electron 应用程序中内置一个浏览器窗口,并在其中打开链接,那么可以使用 BrowserWindowwebContents 模块。这种方式可以实现更高级的功能,例如在应用程序中嵌入网页、自定义浏览器行为等。

下面是一个示例代码:

const { BrowserWindow } = require('electron')

// 创建一个新的浏览器窗口
let win = new BrowserWindow({ width: 800, height: 600 })

// 加载一个外部链接
win.loadURL('https://www.example.com')

三、使用 HTML 的 iframe 元素

如果你只需要在应用程序中嵌入一个小的网页,并且不需要访问外部链接,那么可以使用 HTML 的 iframe 元素。这种方式比较简单,但功能和灵活性有限。

下面是一个示例代码:

<iframe src="https://www.example.com" width="800" height="600"></iframe>

总结

通过 shell 模块、BrowserWindowwebContents 模块或 HTMLiframe 元素,我们可以实现在 Electron 中打开链接的功能。综上所述:

  1. 使用 shell 模块打开链接是最常用、最简单的方式。
  2. 使用 BrowserWindow 的 webContents 模块或 HTML 的 iframe 元素可以实现更高级的功能,但需要更多的代码和注意事项。
  3. 无论使用哪种方式,都应该注意安全性和用户体验,尽可能地避免使用户感到困惑或不安。

参考

www.electronjs.org/zh/docs/lat…