construye un árbol DOM a partir de una cadena sin cargar recursos (específicamente imágenes)

Question

Así que estoy agarrando feeds RSS a través de AJAX. Después de procesarlos, tengo una cadena html que quiero manipular usando varias funciones de jQuery. Para hacer esto, necesito un árbol de nodos DOM.

Puedo analizar una cadena HTML en la función jQuery().
Puedo agregarlo como innerHTML a algún nodo oculto y usarlo.
Incluso he intentado usar el range.createContextualFragment() no estándar de mozilla.

El problema con todas estas soluciones es que cuando mi fragmento de HTML tiene una etiqueta <img>, Firefox obedientemente obtiene la imagen a la que se hace referencia. Debido a que este procesamiento es algo de fondo que no se muestra al usuario, me gustaría obtener un árbol DOM sin el navegador cargando todas las imágenes que contiene.

¿Es esto posible con javascript? No me importa si es solo mozilla, ya que estoy usando las funciones de JavaScript 1.7 (que parecen ser solo de mozilla por ahora)

Answer 1

La respuesta es la siguiente:

var parser = new DOMParser(); 
var htmlDoc = parser.parseFromString(htmlString, "text/html"); 
var jdoc = $(htmlDoc); 
console.log(jdoc.find('img')); 

Si se presta atención a sus peticiones web se dará cuenta de que ninguno se hizo a pesar de que la cadena HTML se analiza y se envolvió por jquery.

Answer 2

La respuesta obvia es analizar la cadena y eliminar los atributos src de img etiquetas (y similares para otros recursos externos que no desea cargar). Pero ya habrás pensado en eso y estoy seguro de que estás buscando algo menos problemático. También supongo que ya ha intentado eliminar el atributo src después de haber jquery analizar la cadena pero antes de anexarla al documento, y ha encontrado que las imágenes todavía se están solicitando.

No se me ocurre ninguna otra cosa, pero es posible que no necesites hacer un análisis completo; esta sustitución debe hacerlo en Firefox con algunas salvedades:

thestring = thestring.replace("<img ", "<img src='' "); 

Las advertencias:

• Esto parece funcionar en el actual Firefox. Eso no significa que las versiones posteriores no elegirán manejar los atributos duplicados src de manera diferente.
• Esto asume la cadena literal "suposición de propósito general, esa cadena podría aparecer en un valor de atributo en una página suficientemente ... interesante ... especialmente en un controlador onclick en línea como este: <a href='#' onclick='$("frog").html("<img src=\"spinner.gif\">")'> (Aunque en ese ejemplo, el reemplazo de falso positivo es inofensivo.)

Esto es obviamente un truco, pero en un ambiente limitado con datos razonablemente bien conocidos ...

Answer 3

puede utilizar el DOM parser para manipular los nodos. basta con sustituir los atributos src, almacenan sus originales valores y agregarlos más tarde.

muestra:

(function() { 
     var s = "<img src='http://www.google.com/logos/olympics10-skijump-hp.png' /><img src='http://www.google.com/logos/olympics10-skijump-hp.png' />"; 
     var parser = new DOMParser(); 
     var dom = parser.parseFromString("<div id='mydiv' >" + s + "</div>", "text/xml"); 
     var imgs = dom.getElementsByTagName("img"); 
     var stored = []; 
     for (var i = 0; i < imgs.length; i++) { 
      var img = imgs[i]; 
      stored.push(img.getAttribute("src")); 
      img.setAttribute("myindex", i); 
      img.setAttribute("src", null); 
     } 
     $(document.body).append(new XMLSerializer().serializeToString(dom)); 
     alert("Images appended"); 
     window.setTimeout(function() { 
      alert("loading images"); 
      $("#mydiv img").each(function() { 
       this.src = stored[$(this).attr("myindex")]; 
      }) 
      alert("images loaded"); 
     }, 2000); 
    })();