如何使用Javascript阻止a标签target="_blank"弹出新窗口

原代码未生效的常见原因 #

• 执行时机早于DOM渲染：如果脚本放在<head>标签内运行，此时<body>内的a标签还未被解析，getElementsByTagName获取到的是空集合，修改逻辑不会生效
• 无法覆盖JS控制的跳转逻辑：很多页面的可点击元素是通过绑定点击事件调用window.open()新开窗口，和a标签的target属性无关，仅修改target不会生效
• 无法处理动态生成的元素：页面异步加载、JS动态插入的a标签，不会被仅执行一次的遍历逻辑覆盖

完整实现方案 #

1. 静态+动态元素全适配方案

可以同时覆盖已有元素和后续动态生成的元素，直接拦截所有a标签的跳转行为，强制在当前页打开：

document.addEventListener('DOMContentLoaded', function() {
  // 全局事件委托，兼容所有已存在和后续新增的a标签
  document.addEventListener('click', function(e) {
    // 如果需要仅阻止指定元素，修改这里的判断条件即可，比如匹配指定类名、ID
    const targetLink = e.target.closest('a')
    if (targetLink) {
      e.preventDefault()
      // 强制当前页跳转
      window.location.href = targetLink.getAttribute('href')
    }
  })

  // 兜底修改所有已存在的a标签target属性
  const links = document.getElementsByTagName('a')
  for (let i = 0; i < links.length; i++) {
    links[i].setAttribute('target', '_top')
  }
})

2. 拦截所有window.open调用

如果页面存在大量通过window.open触发的新开窗口，可以直接重写该方法全局拦截：

// 强制所有window.open调用都改为当前页跳转
window.open = function(url) {
  if (typeof url === 'string') {
    window.location.href = url
  }
}

自定义指定元素的处理逻辑 #

如果只需要阻止部分元素打开新窗口，修改事件委托里的判断条件即可，比如仅阻止类名为no-new-tab的元素：

if (targetLink && targetLink.classList.contains('no-new-tab')) {
  // 插入对应处理逻辑
}

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