6

较新的 JavaScript。在我的页面（asp.net 应用程序，vb 作为服务器端语言）上，我使用 document.getElementsByTagName("img") 来获取所有带有 img 标记的 html 项目。我注意到一个特别没有出现在这个列表中（我能够将它们放入一个数组并单独访问这些项目 - 下面的代码）。此项目包含在 iframe 中（iframe 不使用 SRC 或其他任何东西，只是定义然后其中的 html 就在源代码中，不从另一个页面加载 - 这是由生成的水晶报告查看器自动生成的在运行时，这就是为什么我无法复制来显​​示这一点）。getElementsByTagName 是否因为它位于 iframe 内而没有拾取此图像？我需要能够访问这个 img 的 src（图像是水晶报表查看器中另一个自动生成的项目）。如果没有被拾取的原因是由于 iframe，有没有办法在 iframe 内的项目上运行它？或者只为 iframe 中的所有内容获取“innerhtml”类型属性，以便可以访问 img src。感谢您的帮助。

var IMGmatches = [];
        var IMGelems = document.getElementsByTagName("img");
        for (var j = 0; j < IMGelems.length; j++) {
            IMGmatches.push(IMGelems[j]);
        }
4

2 回答 2

8

这是因为 iframe 中的元素不是父文档的一部分。

要在 iframe 中获取任何内容，您需要访问 iframe 的contentDocument. 因此，您的代码可能如下所示：

var IMGmatches = [], IMGelems = document.getElementsByTagName("img"),
    iframes = document.getElementsByTagName('iframe'), l = IMGelems.length,
    m = iframes.length, i, j;
for( i=0; i<l; i++) IMGmatches[i] = IMGelems[i];
for( j=0; j<m; j++) {
    IMGelems = iframes[j].contentDocument.getElementsByTagName("img");
    l = IMGelems.length;
    for( i=0; i<l; i++) IMGmatches.push(IMGelems[i]);
}
于 2012-06-21T18:31:58.943 回答
0

这是一个函数，它将返回一组从（并包括）根开始的所有元素，包括可能的 iframe（非 CORS）和 shadow dom：

const subtreeSet = (root, theset) => {
	if (!theset) theset=new Set();
	if (!root || theset.has(root)) return theset;
	theset.add(root);
	if (root.shadowRoot) {
		Array.from(root.shadowRoot.children).forEach(child => subtreeSet(child, theset));
	} else {
		if (root.tagName === 'IFRAME') { try { root=root.contentDocument.body; theset.add(root); } catch (err) { root=null; /* CORS */ } }
	 	if (root && root.getElementsByTagName) for (const child of root.getElementsByTagName('*')) subtreeSet(child, theset);
	}
	return theset;
}

subtreeSet(document).forEach(elem => { 
  if (elem.style) elem.style.backgroundColor='yellow'; 
});
<div>TOP</div><br>
<div>IFRAME<br><iframe></iframe></div>

仅在 Chrome 中测试

于 2017-08-17T06:25:25.060 回答