javascript - 检测/拦截 插入 DOM

Question

我们使用的是这家分析公司提供的第三方分析报告脚本。它将 1x1 像素的图像添加到 DOM 中，并在图像的 URL 中报告数据。

我有什么办法可以监控 DOM 并拦截这个 <img>元素并在浏览器请求图像之前更改其“src”属性？

我知道这听起来很奇怪，但我们想在这个报告脚本中加入一个功能(脚本被混淆了)。

Answer 1

在非 IE 浏览器中，您可以使用 DOMNodeInserted 事件检测 DOM 节点的插入。我不知道浏览器是否会在触发事件时发出 HTTP 请求；从快速测试来看，它似乎不在 Firefox 中。由于这在 IE 中不起作用，因此无论如何这都不是可接受的解决方案。

document.body.addEventListener("DOMNodeInserted", function(evt) {
    var node = evt.target;
    if (node.nodeType == 1 && node.tagName == "IMG") {
        node.src = "http://www.gravatar.com/avatar/be21766f09e0e5fd3a2f8cc721ceba2e?s=32&d=identicon&r=PG"; // Your gravatar
    }
}, false);