在 Electron 中优雅地打开链接

前端

2024-01-17 22:20:33

在 Electron 应用中，打开外部链接是一项常见的任务。虽然有很多方法可以做到这一点，但并非所有方法都是生而平等的。本文将探讨打开链接的最佳实践，重点关注使用 shell 模块，它提供了一种安全且一致的方式来处理外部请求。

为什么要使用 `shell` 模块？

shell 模块是一个内置模块，它允许 Electron 应用程序与操作系统的 shell 进行交互。这使其成为打开外部链接的理想选择，因为它：

安全： shell 模块使用操作系统的默认浏览器打开链接，确保了安全的浏览体验。
一致： 无论用户使用哪个操作系统，shell 模块都会使用一致的打开方式。
跨平台： shell 模块在所有支持 Electron 的平台上工作，包括 Windows、macOS 和 Linux。

打开链接的最佳实践

以下是使用 shell 模块打开链接的最佳实践：

检查协议： 在打开链接之前，请检查它的协议。http:// 和 https:// 协议应使用 shell 模块打开，而 mailto:、tel: 等协议应使用特定的处理程序。
使用 shell.openExternal： 使用 shell.openExternal 方法打开链接。此方法将使用操作系统的默认浏览器安全地打开链接。
处理错误： shell.openExternal 返回一个 Promise，应处理以捕获任何错误。

其他方法

虽然 shell 模块是打开链接的推荐方法，但还有其他方法可以做到这一点：

window.open： 使用 window.open 方法在新窗口或选项卡中打开链接。此方法不安全，因为用户可以绕过浏览器设置，并允许恶意网站打开链接。
直接使用 URL： 直接使用 window.location.href 或 window.location.assign 来更改应用程序的 URL。此方法不推荐使用，因为它容易出错且不安全。

示例代码

以下示例代码演示了如何使用 shell 模块打开链接：

const { shell } = require('electron')

document.addEventListener('click', (event) => {
  if (event.target.tagName === 'A') {
    const href = event.target.getAttribute('href')
    shell.openExternal(href)
  }
})