javascript - 如何断开匿名 MutationObserver 与文档元素的连接,而不用其克隆替换元素?
问题描述
在制作一个应该更改多个文档元素的属性的篡改脚本时,我遇到了一个使用事件侦听器来防止对该属性进行任何更改的站点。为了应对这种行为,我可以用它们的克隆替换元素,如下所示:
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();
但是这种方法存在一个问题:浏览器(Chrome 71)在操作结束时会重新计算样式,如果元素数量很大(10 个元素 - 无 thrashing,100 个元素 - 垃圾),有时会重新计算布局。我尝试使用请求动画帧来修改写入函数中的循环:
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 而不用它的克隆替换文档元素?
虽然我知道修改很多元素的属性仍然会强制浏览器重排,但我的问题仍然存在。
解决方案
没有办法断开匿名 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>
推荐阅读
- flutter - 如何使用 Flutter 在图像上添加多个文本水印?
- powershell - 如何正确地将变量中的参数传递给 PS 脚本中的可执行文件?
- reactjs - 如何基于 react-select 元素的 OnChange 在 JSX 中显示元素
- go - 调试Go程序时VSCode错误的路径
- node.js - 如何在使用 Shopify CLI、React 和 Shopify App Bridge 构建的 Shopify 应用中使用路线
- spring-boot - 在 Spring Boot App 中运行 jar 文件但在本地运行良好时解析 Thymeleaf 模板文件时出错
- docker - 端口映射和主机网络之间有区别吗?
- hive - Hbase 扫描显示特殊字符的十六进制字符
- ios - 将背景颜色和占位符图像合并到一张图像中
- wordpress - 在wordpress中的联系表格7中以短URL传递参数