javascript - construct a DOM tree from a string without loading resources (specifically images) - Stack Overflow

admin管理员组

文章数量:1312807

So I am grabbing RSS feeds via AJAX. After processing them, I have a html string that I want to manipulate using various jQuery functionality. In order to do this, I need a tree of DOM nodes.

I can parse a HTML string into the jQuery() function.
I can add it as innerHTML to some hidden node and use that.
I have even tried using mozilla's nonstandard range.createContextualFragment().

The problem with all of these solutions is that when my HTML snippet has an <img> tag, firefox dutifully fetches whatever image is referenced. Since this processing is background stuff that isn't being displayed to the user, I'd like to just get a DOM tree without the browser loading all the images contained in it.

Is this possible with javascript? I don't mind if it's mozilla-only, as I'm already using javascript 1.7 features (which seem to be mozilla-only for now)

So I am grabbing RSS feeds via AJAX. After processing them, I have a html string that I want to manipulate using various jQuery functionality. In order to do this, I need a tree of DOM nodes.

I can parse a HTML string into the jQuery() function.
I can add it as innerHTML to some hidden node and use that.
I have even tried using mozilla's nonstandard range.createContextualFragment().

The problem with all of these solutions is that when my HTML snippet has an <img> tag, firefox dutifully fetches whatever image is referenced. Since this processing is background stuff that isn't being displayed to the user, I'd like to just get a DOM tree without the browser loading all the images contained in it.

Is this possible with javascript? I don't mind if it's mozilla-only, as I'm already using javascript 1.7 features (which seem to be mozilla-only for now)

• javascript
• jquery
• image
• download

Share Improve this question Follow edited Aug 2, 2014 at 5:14 gfxmonk asked Feb 20, 2010 at 12:15 gfxmonkgfxmonk 8,74655 gold badges4444 silver badges5454 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

The answer is this:

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 requests you'll notice that none are made even though the html string is parsed and wrapped by jquery.

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

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

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

The caveats:

• This appears to work in the current Firefox. That doesn't meant that subsequent versions won't choose to handle duplicated src attributes differently.
• This assumes the literal string "general purpose assumption, that string could appear in an attribute value on a sufficiently...interesting...page, especially in an inline onclick handler like this: <a href='#' onclick='$("frog").html("<img src=\"spinner.gif\">")'> (Although in that example, the false positive replacement is harmless.)

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

You can use the DOM parser to manipulate the nodes. Just replace the src attributes, store their original values and add them back later on.

Sample:

    (function () {
        var s = "<img src='http://www.google./logos/olympics10-skijump-hp.png' /><img src='http://www.google./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);
    })();

本文标签： javascriptconstruct a DOM tree from a string without loading resources (specifically images)Stack Overflow