如何在无法修改原脚本时为页面链接添加target="_parent"属性

完全可以在不修改原脚本的情况下实现需求，以下是几种可行方案：

一、处理页面加载完成后已存在的链接 #

如果链接是页面初始渲染时生成的，可在DOM加载完成后批量修改：

jQuery 实现 #

$(document).ready(function() {
  // 给所有<a>标签添加target="_parent"
  $('a').attr('target', '_parent');
  
  // 可选：仅给特定链接添加，比如包含example.com的链接
  // $('a[href*="example.com"]').attr('target', '_parent');
});

原生JavaScript 实现（无需jQuery） #

document.addEventListener('DOMContentLoaded', function() {
  const allLinks = document.querySelectorAll('a');
  allLinks.forEach(link => {
    link.setAttribute('target', '_parent');
    
    // 可选：仅筛选特定链接
    // if (link.href.includes('example.com')) {
    //   link.setAttribute('target', '_parent');
    // }
  });
});

二、处理动态生成的链接 #

如果原脚本是异步或延迟创建链接（比如通过AJAX、定时器生成），上面的方法无法覆盖新生成的链接，这时候可以用MutationObserver监听DOM变化，自动为新增的链接添加属性：

// 创建DOM变化监听器
const linkObserver = new MutationObserver(function(mutations) {
  mutations.forEach(mutation => {
    // 遍历所有新增的节点
    mutation.addedNodes.forEach(node => {
      // 如果节点是<a>标签，直接添加属性
      if (node.tagName === 'A') {
        node.setAttribute('target', '_parent');
      }
      // 如果是包含子节点的元素，递归查找内部的<a>标签
      else if (node.querySelectorAll) {
        const nestedLinks = node.querySelectorAll('a');
        nestedLinks.forEach(link => link.setAttribute('target', '_parent'));
      }
    });
  });
});

// 开始监听body下的子节点变化（包括子树）
linkObserver.observe(document.body, {
  childList: true,
  subtree: true
});

注意事项 #

• 若需要排除部分链接（比如特定类名的链接），可修改选择器，例如$('a:not(.ignore-target)')或在遍历中添加判断条件
• MutationObserver兼容所有现代浏览器及IE11，无需担心兼容性问题
• 使用jQuery方案时，确保页面已正确引入jQuery库

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