dans DOM

Nous utilisons un script de reporting analytique tiers fourni par cette société analytique. Il ajoute une image 1×1 pixel dans le DOM avec des données de rapport dans l'URL de l'image.

Y a-t-il un moyen de surveiller le DOM et d'intercepter cet élément <img> et de modifier son attribut "src" avant que le navigateur ne demande l'image?

On dirait une chose vraiment étrange à faire, je sais, mais il y a une fonctionnalité que nous aimerions pirater sur ce script de rapport (le script est obscurci).

Dans les navigateurs non IE, vous pouvez détecter l'insertion d'un noeud DOM à l'aide de l'événement DOMNodeInserted . Je ne sais pas si le navigateur aura effectué la requête HTTP au moment où l'événement est déclenché; Il semble que Firefox ne procède pas rapidement à Firefox. Comme cela ne fonctionne pas dans IE, cela peut ne pas être une solution acceptable de toute façon.

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

Donnez-en un coup. Je ne sais pas combien il sera utile, mais j'ai eu l'envie de bricoler et cela explique quelque peu le scénario selon lequel le tiers intègre délibérément un retard:

 $(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/

Si le script tiers utilise une méthode (comme .appendChild ) pour ajouter l'élément au document, vous pouvez probablement le faire en remplaçant cette méthode de l'objet concerné par votre propre fonction.

Cela aurait l'avantage de travailler dans tous les navigateurs, et je pense que vous ne générerez qu'une seule demande HTTP (pour l'URL modifiée, pas pour l'original).

S'appuyant sur ce que suggère Adam:

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