javascript - 使用 AJAX 加载代码时添加 rel ="noopener"

Question

我为 Chrome 扩展创建了一个快速、简单的脚本，将 rel="noopener noreferrer" 添加到网站上带有 target="_blank" 的所有链接。
现在的问题是(例如在 Tumblr 上，如果您滚动浏览 Feed)如果在网站上浏览时加载了内容，则脚本显然不会向链接添加 noopener。
现在我想到使用MutationObserver但如果我用脚本更改链接，MutationObserver 显然会识别出更改，并且我将得到无限循环。

function gatherlinks() {
    var input = document.querySelectorAll('a[target="_blank"]');

    input.forEach(function addrelnoopener(link) {
        if (link.rel != 'noopener' || addrelnoopener.rel != 'noreferrer') {
            link.rel = 'noopener noreferrer';
        }
    });
}

有人对我如何检测新链接有想法吗？

Answer 1

rel 可以有多个您不想覆盖的以空格分隔的值(请参阅 the list )。

使用relList rel 属性的 DOM 接口(interface)仅添加缺失的值，因此当 MutationObserver 触发时，它只会跳过这些链接并且不会进入无限循环:

// process the current document
onMutation([{
  addedNodes: [document.body],
}]);

// process the future modifications
const mo = new MutationObserver(onMutation);
mo.observe(document, {subtree: true, childList: true});

function onMutation(mutations) {
  var links = [];
  // ES5 loops with vars are still much faster in 2019,
  // which is important for subtree:true, more info: https://stackoverflow.com/a/39332340
  for (var i = 0; i < mutations.length; i++) {
    var addedNodes = mutations[i].addedNodes; 
    for (var j = 0; j < addedNodes.length; j++) {
      var node = addedNodes[j];
      if (node.tagName === 'A' && node.target === '_blank') {
        links.push(node);
      } else if (node.firstElementChild && node.querySelector('a[target*="_blank"]')) {
        links.push(...node.querySelectorAll('a[target*="_blank"]'));
      }
    }
  }

  for (var k = 0; k < links.length; k++) {
    var link = links[k];
    if (!link.relList.contains('noopener')) {
      link.relList.add('noopener');
    }
    if (!link.relList.contains('noreferrer')) {
      link.relList.add('noreferrer');
    }
  }
}

或者您可以在 window 上附加一个全局 mousedown 处理程序并修改单击的链接:

window.addEventListener('mousedown', e => {
  const link = e.target.closest('a');
  if (link) {
    const {relList} = link;
    if (!relList.contains('noopener')) {
      relList.add('noopener');
    }
    if (!relList.contains('noreferrer')) {
      relList.add('noreferrer');
    }
  }
}, true);