目录

本文收录在《如何开发一个自己的笔记软件》系列中，该系列源码均可在 Blossom 笔记软件 仓库中查看。仓库地址：

• Github
• Gitee

Electron 如何定制链接的跳转行为

在 Electron 的默认行为中，如果点击A标签，默认会在当前窗口中跳转至链接。如何改变这一行为呢？

有两种方法：

1. 自定义 will-navigate 事件
2. 重写 setWindowOpenHandler 实现

方法一、will-navigate

你可以监听will-navigate事件，如下：

import { shell } from 'electron'

// window 就是你的窗口实例
window.webContents.on('will-navigate', (event: Event, url: string) => {
  e.preventDefault()
  // 这里就可以对链接进行校验，为 a 标签指定逻辑
  // 使用默认浏览器打开链接
  shell.openExternal(url)
})

还有一种更简单的方式，你可以为 a 标签增加 target 属性。

<a href="https://www.baidu.com" target="_blank">www.baidu.com</a>

这样在点击链接时，就不会进入will-navigate事件，而是直接使用默认浏览器打开链接了。

但是如果我想定制链接跳转的逻辑，但点击链接有不进入will-navigate，那要如何拦截呢？

这时你就需要使用 window.webContents.setWindowOpenHandler() 方法。

方法二、setWindowOpenHandler

该方法不仅处理 target="_blank"，还会处理 window.open() 事件

window.webContents.setWindowOpenHandler((details: HandlerDetails) => {
  // 获取链接
  let url = (details.url as string)
  // 这里就可以对链接进行校验，为 a 标签指定逻辑
  // 使用默认浏览器打开链接
  shell.openExternal(url)

  // 然后拒绝使用默认行为，因为我们已经自行处理了
  return { action: "deny" }
})