/interceptación de inserción de <img> en DOM

Estamos utilizando una tercera parte de análisis de informes script proporcionado por esta empresa de análisis. Agrega una imagen de 1x1 píxeles al DOM con datos de informes en la URL de la imagen./interceptación de inserción de <img> en DOM

¿Hay alguna manera de controlar el DOM e interceptar este elemento <img> y cambiar su atributo "src" antes de que el navegador solicite la imagen?

suena como una cosa realmente extraño para hacerlo, lo sé, pero hay una característica que nos gustaría que cortar en este script de notificación (la secuencia de comandos se obsfucated).

Fuente

2010-08-04 JamesBrownIsDead

No estoy seguro de cómo hacerlo, pero ¿lo ha probado en vivo? como: $ ('img'). live ('load', function() {alert ("¡Imagen añadida a DOM!");}); – Adam

@ Adam: Estoy bastante seguro de que eso te volverá loco en poco tiempo, especialmente considerando que una página puede tener literalmente cientos de imágenes. – Robusto

@Robusto True, pero podría filtrar el selector por clase, id, src o tamaño, solo sugería usar live para adjuntar el evento de carga, pero no estoy seguro de si se llama cuando se agrega una imagen al DOM y si es así cuando. – Adam

En los navegadores no-IE, se puede detectar la inserción de un nodo DOM utilizando el evento DOMNodeInserted. No sé si el navegador habrá realizado la solicitud HTTP para cuando se dispare el evento; parece que no en Firefox de una prueba rápida. Como esto no funciona en IE, esta puede no ser una solución aceptable de todos modos.

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

Fuente

2010-08-04 23:35:52

Sobre la base de lo que Adam sugirió:

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

Fuente

2010-08-04 23:46:39 calvinf

Esto no funcionará. Adam sugirió el uso de 'live', que se aplica a los elementos creados en el futuro. Este script solo analiza los elementos actualmente en el DOM. – mattbasta

Si se agrega el mediante javascript después de que el DOM cargada, estoy de acuerdo, él querría usar en vivo. Sin embargo, el selector que quisiera usar sería bastante similar a este. – calvinf

pruébalo. No sé lo útil que será, pero me sentí como retoques y un poco de cuentas correspondientes al escenario en el que el tercero incorpora a propósito un retraso:

$(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); 
});

Demostración: http://jsfiddle.net/NyEdE/3/

Fuente

2010-08-05 00:09:26 karim79

Si el píxel se agrega como parte de un conjunto de medidas, cargas posibles antes de que se active el evento listo del DOM. – mattbasta

Si el tercer La secuencia de comandos de grupo usa un método (como .appendChild) para agregar el elemento al documento, probablemente puede hacerlo reemplazando ese método del objeto relevante con su propia función.

que tendría la ventaja de trabajar en todos los navegadores, y creo que sólo sería generar una petición HTTP (por la URL modificada, no para el original).

Fuente

2010-08-05 00:10:08

/interceptación de inserción de <img> en DOM

Respuesta

Cuestiones relacionadas