Question

我正在使用Chrome扩展程序，我遇到以下问题：

var myDiv = document.createElement('div');
myDiv.innerHTML = '<img src="a.png">';

现在发生的是Chrome尝试加载“a.png”资源，即使我没有将“div”元素附加到文档中。有没有办法阻止它？

_在扩展中我需要从不提供任何API的站点获取数据，因此我必须解析整个HTML以获取必要的数据。编写我自己的简单HTML解析器可能很棘手，所以我宁愿使用本机HTML解析器。但是，在Chrome中，当我将整个源代码放到一些临时的非附加元素时（因此它会被解析并且我可以过滤必要的数据），所以图像（以及可能的其他资源）也开始加载，导致更高流量或（在相对路径的情况下）控制台中的大量错误。 _

Answer 1

要防止加载资源，您需要在全新的#document中创建 Node 。您可以使用document.implementation.createHTMLDocument。

var dom = document.implementation.createHTMLDocument(); // make new #document
// now use this to..
var myDiv = dom.createElement('div');  // ..create a <div>
myDiv.innerHTML = '<img src="a.png">'; // ..parse HTML

Answer 2

你可以通过将html存储在非标准属性中来延迟解析/加载html，然后将其分配给innerHtml，“当时机到来时”：

myDiv.setAttribute('deferredHtml', '<img src="http://upload.wikimedia.org/wikipedia/commons/4/4e/Single_apple.png">');

global.loadDeferredImage = function() {
    if(myDiv.hasAttribute('deferredHtml')) {
      myDiv.innerHTML = myDiv.getAttribute('deferredHtml');
      myDiv.removeAttribute('deferredHtml');
    }
};

... onclick="loadDeferredImage()"

我创建了jsfiddle来说明这个想法：

http://jsfiddle.net/akhikhl/CbCst/3/

如何防止Chrome中未附加元素的资源加载

2 个答案: