Question

所以我通过AJAX抓取RSS提要。在处理它们之后，我有一个html字符串，我想使用各种jQuery功能来操作它。为此，我需要一个DOM节点树。

我可以将HTML字符串解析为jQuery（）函数我可以将它作为innerHTML添加到某个隐藏节点并使用它我甚至尝试过使用mozilla的非标准range.createContextualFragment（）。

所有这些解决方案的问题在于，当我的HTML代码段具有<img>标记时，firefox会尽职地提取所引用的任何图像。由于此处理是未向用户显示的后台内容，因此我想在没有浏览器的情况下获取DOM树，并加载其中包含的所有图像。

这可以用javascript吗？我不介意它是否只是mozilla，因为我已经使用了javascript 1.7功能（现在似乎只是mozilla）

Answer 1

显而易见的答案是解析字符串并从src标记中删除img属性（对于您不想加载的其他外部资源，类似）。但你已经想到了这一点，我相信你正在寻找一些不那么麻烦的东西。我还假设您已经尝试在jquery解析字符串之后但在将其附加到文档之前删除src属性，并发现图像仍在被请求。

我没有提出任何其他内容，但您可能不需要进行完整的解析;这个替换应该在Firefox中做一些警告：

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

警告：

这似乎适用于当前的Firefox。这并不意味着后续版本不会选择以不同方式处理重复的src属性。
这假设文字字符串是“通用假设，该字符串可以出现在足够...有趣...页面上的属性值中，尤其是在内联onclick处理程序中，如下所示：{{1} （尽管在那个例子中，误报替换是无害的。）

这显然是一种黑客行为，但是在有限的环境中拥有相当知名的数据......

Answer 2

您可以使用DOM parser来操纵节点。只需替换 src 属性，存储它们的原始值并稍后再添加它们。

样品：

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

Answer 3

答案是：

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

如果你注意你的网络请求，你会注意到即使html字符串被jquery解析和包装也没有。

从字符串构造DOM树而不加载资源（特别是图像）

3 个答案: