检测/拦截<img>插入DOM

Question

我们正在使用此分析公司提供的第三方分析报告脚本.它将1x1像素图像添加到DOM中,并在图像的URL中报告数据.

<img>在浏览器请求图像之前,有没有办法监视DOM并拦截此元素并更改其"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);