javascript - Detectingintercepting insertion of <img> into DOM - Stack Overflow

admin管理员组

文章数量:1317909

We're using a third-party analytics reporting script provided by this analytics pany. It adds a 1x1 pixel image into the DOM with reporting data in the URL of the image.

Is there any way for me to monitor the DOM and intercept this <img> element and change its "src" attribute before the browser requests the image?

Sounds like a really odd thing to do, I know, but there's a feature we'd like to hack onto this reporting script (the script is obsfucated).

We're using a third-party analytics reporting script provided by this analytics pany. It adds a 1x1 pixel image into the DOM with reporting data in the URL of the image.

Is there any way for me to monitor the DOM and intercept this <img> element and change its "src" attribute before the browser requests the image?

Sounds like a really odd thing to do, I know, but there's a feature we'd like to hack onto this reporting script (the script is obsfucated).

• javascript
• jquery
• dom

Share Improve this question Follow edited Dec 18, 2016 at 21:03 Jonathan Hall 79.8k1919 gold badges159159 silver badges203203 bronze badges asked Aug 4, 2010 at 23:19 JamesBrownIsDeadJamesBrownIsDead 35511 gold badge55 silver badges99 bronze badges 8

• Not sure how to do that, but have you tried live? like: $('img').live('load',function(){alert("Image added to DOM!");}); – Adam Commented Aug 4, 2010 at 23:31
• @Adam: I'm pretty sure that would drive you crazy in short order, especially considering a page can have literally hundreds of images on it. – Robusto Commented Aug 4, 2010 at 23:38
• @Robusto True but you could filter the selector by class, id, src, or size, I was just suggesting using live to attach the load event, but I'm not sure if that gets called when an image is added to the DOM and if so when. – Adam Commented Aug 4, 2010 at 23:40
• 2 Waiting for the load event of the image surely defeats the object, which is to prevent the image from being requested at all. An image's load event is only fired once the image has fully downloaded. – Tim Down Commented Aug 4, 2010 at 23:59
• 2 I'm pretty sure you simply won't be able to achieve this in IE. – Tim Down Commented Aug 5, 2010 at 0:02

 |  Show 3 more ments

4 Answers 4

Sorted by: Reset to default 4

In non-IE browsers, you can detect the insertion of a DOM node by using the DOMNodeInserted event. I don't know if the browser will have made the HTTP request by the time the event is fired; it appears not to in Firefox from a quick test. Since this doesn't work in IE, this may not be an acceptable solution anyway.

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

Give this a go. I don't know how useful it will be, but I felt like tinkering and it somewhat accounts for the scenario whereby the third party purposefully incorporates a delay:

$(document).ready(function() {
// match an image with specific dimension, return it
function imgNinja() {
    var $img =  $("img").filter(function() {
        return ($(this).height() == 1 && $(this).width() == 1);
    });
    return $img;
}

// periodically execute this to check for matches
function keepSeeking() {
    $img = imgNinja();
    if($img.length) {
        alert('found it');
        clearInterval(i);
        // do something with image
    }
}

// insert a fake into the DOM at a bit of an interval
function addNastyImage() {
   var $invader = $('<img src="foo.jpg" height="1px" width="1px"/>'); 
    $('html').append($invader);
}


setTimeout(addNastyImage, 5000);
var i = setInterval(keepSeeking, 1000);
});

Demo: http://jsfiddle/NyEdE/3/

If the third-party script uses a method (like .appendChild) to add the element to the document, you can probably do this by replacing that method of the relevant object with your own function.

That would have the advantage of working in all browsers, and I think you would only generate one HTTP request (for the changed URL, not for the original one).

Building on what Adam suggested:

$(document).ready(function() {
  $("img[src='http://example./example.gif']").attr('src','http://example./new_src.gif');
});

本文标签： javascriptDetectingintercepting insertion of ltimggt into DOMStack Overflow