Question

在制作应该更改多个文档元素属性的篡改脚本时，我遇到了一个使用事件侦听器阻止对该属性进行任何更改的站点。为了解决这种问题，我可以用其克隆替换元素，如下所示：

const map = new Map();

function read() {
    for (let image of [...document.getElementsByTagName('img')]) {
        const clone = image.cloneNode(/* with children */true);
        // TODO: modify the clone
        map.set(image, clone);
    }
}

read();

function write() {
    for (let [image, clone] of map) {
        image.parentNode.replaceChild(clone, image);
    }
}

write();

map.clear();

但是使用此方法存在一个问题：如果元素数量很大（10个元素-不打乱，100个元素-乱写），则操作结束时的浏览器（Chrome 71）将重新计算样式，有时还会重新规划thrash布局。我试图通过请求动画帧来修改写函数中的循环：

window.requestAnimationFrame(document.replaceChild.bind(image.parentNode, clone, image));

但是它仍然会影响布局。试图在循环中插入一个暂停：

async function write() {
  for (let [image, clone] of map) {
    await new Promise(window.requestAnimationFrame);
    image.parentNode.replaceChild(clone, image);
  }
}

没有变化。试图将元素数组拆分为小块并操作每个块，但浏览器最后仍然会延迟重新计算样式并更改布局。因此，除了使用克隆代替替换每个元素外，我还可以使用以下方式删除每个事件监听器：

for (let image of [...document.getElementsByTagName('img')]) {
  const listeners = getEventListeners(image);
  for (let event_type in listeners) {
    for (let event of listeners[event_type]) {
      image.removeEventListener(event.type, event.listener, event.useCapture);
    }
  }
}

虽然这可以解决问题，但是仍然存在一个问题：如果站点不使用事件侦听器，而是使用MutationObserver来防止修改文档元素，该怎么办？有没有一种方法可以删除MutationObserver而不用其克隆替换文档元素？

尽管我知道修改许多元素的属性仍然会迫使浏览器重排，但我的问题仍然存在。

Answer 1

无法断开匿名MutationObserver的连接，但这并不意味着没有其他解决方案。

我相信您不需要更改页面上的所有链接。
您只需要拦截用户尝试遵循的一个链接即可。

请参见下面的代码段。

我们要更改href属性，并且该属性已被观察者捕获：

// anonymous observer:
(new MutationObserver(function(mutationsList, observer) {
  for (var mutation of mutationsList) {
    if (
      mutation.type == 'attributes' &&
      mutation.target.href !== 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png'
    ) {
      console.log('The ' + mutation.attributeName + ' attribute was modified.');
      mutation.target.href = 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png'
    }
  }
}))
.observe(
  document.querySelector('html'), {
    attributes: true,
    subtree: true
  }
);

document.querySelectorAll('a').forEach(function(a) {
  a.href = 'https://yastatic.net/www/_/x/Q/xk8YidkhGjIGOrFm_dL5781YA.svg';
});

<a href="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png">Google</a>

为避免这种情况，请将事件侦听器设置为链接，并在click上更改location.href（或打开新标签或窗口），而不是更改a.href：

// anonymous observer:
(new MutationObserver(function(mutationsList, observer) {
  for (var mutation of mutationsList) {
    if (
      mutation.type == 'attributes' &&
      mutation.target.href !== 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png'
    ) {
      console.log('The ' + mutation.attributeName + ' attribute was modified.');
      mutation.target.href = 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png'
    }
  }
}))
.observe(
  document.querySelector('html'), {
    attributes: true,
    subtree: true
  }
);

document.querySelectorAll('a').forEach(function(a) {
  a.addEventListener('click', function(e) {
    e.preventDefault();
    location.href = 'https://yastatic.net/www/_/x/Q/xk8YidkhGjIGOrFm_dL5781YA.svg';
  });
});

<a href="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png">Google</a>

如何断开匿名MutationObserver与文档元素的连接而不用其克隆替换元素？

1 个答案: