Rilevamento/intercettazione dell'inserimento di <img> in DOM

Question

Stiamo utilizzando uno script di reporting di analitica di terze parti fornito da questa società di analisi. Aggiunge un'immagine del pixel 1x1 nel DOM con i dati di segnalazione nell'URL dell'immagine.

È possibile monitorare il DOM e intercettare questo elemento <img> e modificare l'attributo "src" prima che il browser richieda l'immagine?

Suona come una cosa davvero strana da fare, lo so, ma c'è una funzione che vorremmo incidere su questo script di segnalazione (la sceneggiatura è ovvia).

Answer 1

Nei browser non IE, è possibile rilevare l'inserimento di un nodo DOM utilizzando l'evento DOMNodeInserted. Non so se il browser avrà effettuato la richiesta HTTP prima che l'evento venga attivato; non sembra in Firefox da un test rapido. Poiché ciò non funziona in IE, questa potrebbe non essere una soluzione accettabile in ogni caso.

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); 

Answer 2

Costruire su ciò che Adam ha suggerito:

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

Answer 3

dare un'andare. Non so quanto sia utile sarà, ma mi sentivo come armeggiare e rappresenta un po 'per lo scenario in cui la terza parte comprende volutamente un ritardo:

$(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.net/NyEdE/3/

Answer 4

Se il terzo lo script party utilizza un metodo (come .appendChild) per aggiungere l'elemento al documento, è possibile farlo sostituendo il metodo dell'oggetto rilevante con la propria funzione.

Questo avrebbe il vantaggio di funzionare in tutti i browser e penso che si genererebbe solo una richiesta HTTP (per l'URL modificato, non per quello originale).