How to open links in default browser using Electron

在 Electron 开发桌面应用时，经常需要处理外部链接的跳转。由于 Electron 应用内嵌了 Chromium，点击链接默认会在应用内部新开一个浏览器窗口来加载页面，但这通常不是我们想要的行为。我们希望点击链接时能够在用户的默认浏览器中打开。为了实现这一功能，我们可以使用 Electron 的 shell 模块中的 openExternal 方法。

以下是具体的实现步骤和示例代码：

步骤

在你的应用中引入 shell 模块： Electron 的 shell 模块提供了很多与桌面集成相关的功能，包括在外部应用中打开文件、链接等。
```
javascript
const { shell } = require('electron');
```

处理链接点击事件： 当用户点击链接时，阻止默认的链接打开行为，并使用 openExternal 方法打开链接。

javascript
const handleLinkClick = (event) => {
  event.preventDefault();  // 阻止默认行为
  const href = event.target.href;  // 获取链接地址
  shell.openExternal(href);  // 在默认浏览器中打开链接
};

给链接添加事件监听器： 在页面加载或应用启动时，为所有外部链接添加点击事件监听器。

javascript
document.addEventListener('DOMContentLoaded', () => {
  const links = document.querySelectorAll('a[href^="http"]');
  links.forEach(link => {
    link.addEventListener('click', handleLinkClick);
  });
});

示例

假设你的 Electron 应用有一个 HTML 页面，里面包含了一些外部链接：

html
<!DOCTYPE html>
<html>
<head>
    <title>我的 Electron 应用</title>
</head>
<body>
    <h1>欢迎使用我的应用</h1>
    <p><a href="https://www.example.com">访问 Example</a></p>
    <p><a href="https://www.google.com">访问 Google</a></p>
    <script src="renderer.js"></script>
</body>
</html>

在 renderer.js 文件中，你可以按照上面的步骤编写代码：

javascript
const { shell } = require('electron');

document.addEventListener('DOMContentLoaded', () => {
  const links = document.querySelectorAll('a[href^="http"]');
  links.forEach(link => {
    link.addEventListener('click', (event) => {
      event.preventDefault();
      const href = event.target.href;
      shell.openExternal(href);
    });
  });
});

使用这种方式，当用户点击链接时，他们的默认浏览器会打开这个链接，而不是在 Electron 应用内部打开。这样可以提供更贴近用户预期的浏览体验，并利用浏览器的全功能性。

2024年6月29日 12:07 回复

1个答案

步骤

示例

你的答案