3

我正在开发 Chrome 扩展程序，但遇到以下问题：

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

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

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

4

2 回答 2

2

为了防止资源被加载，你需要在一个全新的#document中创建你的节点。你可以用这个。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
于 2013-06-02T17:02:17.900 回答
0

您可以通过将其存储在非标准属性中来延迟解析/加载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/

于 2013-06-02T17:25:58.190 回答