如何修改在新标签页打开的外部链接URL？

当然可以修改这类新标签页打开的外部链接URL，问题出在浏览器对带target="_blank"的链接的处理时序——部分场景下浏览器会预加载新标签页，导致你的点击事件中修改href的操作晚于浏览器读取原始URL的时机。下面是两种可靠的处理方案：

方案一：点击时拦截默认行为，手动控制跳转 #

通过阻止浏览器的默认跳转动作，先修改URL，再根据target属性手动打开页面，完全掌控流程：

document.querySelectorAll('a[href*="/outgoing/"]').forEach(link => {
  link.addEventListener('click', function(e) {
    // 阻止浏览器默认跳转行为
    e.preventDefault();
    // 处理URL参数：已有参数加&，没有则加?
    const param = 'param=this';
    const separator = this.href.includes('?') ? '&' : '?';
    const newHref = this.href + separator + param;
    // 根据target属性决定打开方式
    if (this.target === '_blank') {
      window.open(newHref, '_blank');
    } else {
      window.location.href = newHref;
    }
  });
});

方案二：页面加载时提前修改所有目标链接 #

更简单的思路是直接在页面加载完成后，批量修改符合条件的链接href，无需等到点击时处理，从根源上避免时序问题：

document.querySelectorAll('a[href*="/outgoing/"]').forEach(link => {
  const param = 'param=this';
  // 避免重复添加相同参数
  if (!link.href.includes(param)) {
    const separator = link.href.includes('?') ? '&' : '?';
    link.href += separator + param;
  }
});

相关原理说明 #

• 浏览器链接处理时序：点击<a>标签时，浏览器会先触发绑定的click事件监听器，再执行默认跳转。但针对target="_blank"的链接，部分浏览器会启动预加载优化，提前读取原始URL，导致点击时修改href的操作无法生效。
• 事件默认行为拦截：e.preventDefault()会取消浏览器的默认跳转动作，让开发者完全控制后续的页面跳转逻辑。
• 预加载机制：浏览器为提升新标签页打开速度，会对_blank链接进行预解析、预加载，这是导致原始URL被提前读取的核心原因。

学习相关原理的途径 #

• 深入理解DOM事件流机制，包括事件捕获、冒泡阶段，以及默认行为的触发时机；
• 学习<a>标签的target属性特性，以及浏览器对新标签页的加载优化策略；
• 掌握JavaScript事件处理的核心方法，比如preventDefault()、stopPropagation()的使用场景。

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