Build a DOM tree from a string without loading resources (in particular, images)

Question

So, I grab RSS feeds through AJAX. After processing them, I have an html string that I want to manipulate using various jQuery functions. To do this, I need a DOM node tree.

I can parse an HTML string in jQuery () function.
I can add it as innerHTML to the hidden node and use it.
I even tried to use the non-standard range of mozilla.createContextualFragment ().

The problem with all of these solutions is that when my HTML snippet has an <img> , firefox really extracts everything that the image refers to. Since this processing is a background material that is not displayed to the user, I would just like to get the DOM tree without a browser loading all the images contained in it.

Is this possible with javascript? I do not mind if this is only mozilla, since I already use javascript 1.7 functions (which seem to be mozilla-only for now)

Answer 1

The answer is:

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

If you pay attention to your web queries, you will notice that none of them are executed, even if the html string is parsed and verified by jquery.

Answer 2

The obvious answer is to parse the string and remove the src attributes from the img tags (and similar for other external resources that you don't want to load). But you already thought about it, and I'm sure that you are looking for something less troublesome. I also assume that you already tried to remove the src attribute after jquery parsed the string, but before adding it to the document, and found that the images are still being requested.

I do not come up with anything else, but you may not need to do a full parsing; this replacement should do this in Firefox with some caveats:

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

Cautions:

• This seems to work in current Firefox. This does not mean that future versions will not handle duplicate src attributes in different ways.
• This assumes the literal string is "general purpose assumption, this string can appear in the attribute value on the page enough ... interesting ... especially in the onclick built-in handler, such as: <a href='#' onclick='$("frog").html("<img src=\"spinner.gif\">")'> (Although in this example, a false positive substitution is harmless.)

This is obviously a hack, but in a limited environment with fairly well-known data ...

Answer 3

You can use DOM parser to manage nodes. Just replace the src attributes, keep their original values ​​and add them later.

Example:

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