将 HTML 字符串加载到 jQuery 中而不请求图像答案

【问题标题】：load an HTML string into jQuery without requesting images将 HTML 字符串加载到 jQuery 中而不请求图像
【发布时间】：2014-09-17 19:33:38
【问题描述】：

有没有办法在不请求图像的情况下将包含图像标签的 HTML 字符串加载到 jQuery 中？我希望能够在 jQuery 对象上运行选择器以提取一些信息。举个例子：

var string = $('<p><img src="http://image.url/file.jpg" /></p>');
string.find('img');

浏览器将请求http://image.url/file.jpg。我正在尝试找到一种方法来做同样的事情，但浏览器不会请求图像。

谢谢

【问题讨论】：

标签： javascript jquery

【解决方案1】：

您可以使用 XML 文档来执行搜索：

function searchXml(xmlStr, selector) {
    var parser, xmlDoc;
    if(window.DOMParser) {
        parser = new DOMParser();
        xmlDoc = parser.parseFromString(xmlStr, "text/xml");
    } else {
        xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
        xmlDoc.async = false;
        xmlDoc.loadXML(xmlStr); 
    }
    return $(xmlDoc).find(selector);
}

console.log(searchXml('<p><img src="http://image.url/file.jpg" /></p>', 'img').attr('src'));

查看实际操作：http://jsfiddle.net/na9Tt/

请记住，它是 XML 文档，而不是 HTML 文档，因此某些特定于 HTML 的特定类型的搜索可能不会以完全相同的方式工作。

【讨论】：

我认为这在某些情况下会起作用。然而，在我的情况下，HTML 来自我无法控制的 RSS 提要，并且可能会导致解析错误。
HTML 几乎从来都不是有效的 XML。 XHTML 当然是，但它没有被广泛使用是有原因的。

【解决方案2】：

您需要明确问题的界限。如果您的问题是：“有什么方法可以将确切的 HTML（不更改它）加载到 jQuery 对象中（就像您正在做的那样）而不会导致图像加载”，那么答案是否定的。 jQuery 创建一个临时父对象并将您的 HTML 分配给 innerHTML 属性，这会导致浏览器完全解析此 HTML，这将加载图像 URL。

因此，如果您想在此 HTML 上运行选择器操作而不加载图像，您有多种选择：

在将 HTML 提供给 jQuery 之前修改图像标签，使其 .src 属性消失或为空，或者 <img> 标签不是图像标签或不再存在。
李>
使用这种类型的 jQuery 以外的东西来解析您的 HTML，以便为选择器操作做好准备。

如果您透露更多关于您尝试这样做的原因或您尝试对选择器操作执行的操作，我们或许可以提出更多替代方案。

【讨论】：

我认为我们必须假设 HTML 是不可变的。
@Julian - 问题并没有说字符串必须是不可变的，也没有理由需要它。它只是一个字符串，可以通过正则表达式或其他字符串解析甚至 HTML 解析轻松修改。如果原件需要保留用于其他用途，则可以更改并使用副本。此外，如果它是不可变的，那么他们的问题的答案是它不能在不加载图像的情况下按原样加载到 jQuery 中。

【解决方案3】：

您可以将图像路径添加到另一个属性，像这样

<img id="imgid" src="" data-src="/path_to_image">

然后您可以在需要时将 src 属性替换为 data-src。像这样的

$('#imgid').attr('src',$('#imgid').attr('data-src'));

【讨论】：

【解决方案4】：

据我所知，这只是 Chrome，找到它here，如果字符串不是有效的 HTML，该页面上的第一种方法可能不起作用，第二种方法可以正常工作。不会创建对图像的请求，也不会尝试执行内联脚本（这非常适合我的用例 - Chrome 扩展后台任务）。

var doc = document.implementation.createHTMLDocument("");
doc.body.innerHTML = htmlString;

【讨论】：