Electron实现仅外部链接在浏览器打开的问题

你的问题根源在于原来的判断逻辑不够精准——它会把所有http开头的链接都当成外部链接，包括和你的Electron应用同源的内部链接（比如本地开发服务器上的相对路径会被浏览器自动解析成http://localhost:xxx/xxx这种同域URL），另外还没考虑到点击a标签内部元素（比如<a href="#"><span>bar</span></a>）时的事件委托问题。

下面给你两种可靠的解决方案：

方案一：改进渲染进程的点击事件处理 #

这种方案适合需要在渲染进程里做自定义逻辑的场景，修复了锚点链接误判和内部元素点击的问题：

// 确保你已经在渲染进程中正确引入shell（Electron 14+建议通过contextBridge暴露，旧版可直接引入）
const { shell } = require('electron');

document.addEventListener('click', function(event) {
  // 找到点击元素所属的最外层a标签，处理a标签内部嵌套其他元素的情况
  const linkElement = event.target.closest('a');
  if (!linkElement) return;

  const linkHref = linkElement.href;

  // 直接跳过锚点链接（#开头）
  if (linkHref.startsWith('#')) {
    return;
  }

  try {
    // 解析当前页面URL和点击的链接URL
    const currentPageUrl = new URL(window.location.href);
    const targetLinkUrl = new URL(linkHref, currentPageUrl);

    // 仅当链接是http/https协议，且和当前页面源不同时，才在外部浏览器打开
    if (['http:', 'https:'].includes(targetLinkUrl.protocol) && targetLinkUrl.origin !== currentPageUrl.origin) {
      event.preventDefault();
      shell.openExternal(targetLinkUrl.href);
    }
  } catch (error) {
    // 解析失败的无效链接，不做处理
    return;
  }
});

方案二：主进程监听new-window事件（更推荐） #

这种方案不需要在渲染进程写额外代码，所有链接跳转逻辑由主进程控制，更安全且不容易被页面脚本干扰：

// 主进程代码
const { app, BrowserWindow, shell } = require('electron');

app.whenReady().then(() => {
  const mainWindow = new BrowserWindow({
    // 你的窗口配置
    width: 800,
    height: 600
  });

  // 加载你的应用页面
  mainWindow.loadFile('index.html'); // 或者 loadURL('http://localhost:3000')

  // 监听窗口打开事件
  mainWindow.webContents.setWindowOpenHandler((details) => {
    const currentWindowUrl = new URL(mainWindow.webContents.getURL());
    const targetLinkUrl = new URL(details.url);

    // 判断是否为外部http/https链接
    if (['http:', 'https:'].includes(targetLinkUrl.protocol) && targetLinkUrl.origin !== currentWindowUrl.origin) {
      // 在外部浏览器打开链接
      shell.openExternal(details.url);
      // 阻止Electron创建新窗口
      return { action: 'deny' };
    }

    // 内部链接允许在Electron窗口中打开
    return { action: 'allow' };
  });
});

两种方案都能精准区分：

• 外部链接（如http://google.com）：在浏览器中打开（符合预期）
• 锚点链接（如<a href="#">bar</a>）：正常在Electron内跳转（符合预期）
• 内部相对链接（如<a href="/about">About</a>）：在Electron窗口内打开（符合预期）

内容的提问来源于stack exchange，提问作者Sebastian