document.images 未在 chrome 或 firefox 上加载，但已在 IE 上加载答案

【问题标题】：document.images not loaded on chrome or firefox, but it is loaded on IEdocument.images 未在 chrome 或 firefox 上加载，但已在 IE 上加载
【发布时间】：2012-08-30 01:50:39
【问题描述】：

我有一个锚标记<a>，其中有一个图像标记<img>，我在该锚标记上调用javascript函数如下：

<a href="javascript: foo();"><img ...></a>
<a href="javascript: foo();"><img ...></a>
<a href="javascript: foo();"><img ...></a>

在 foo() 函数中，我使用 document.images 检索包含 3 张图像的数组。它在 IE 上运行良好，但在 chrome 和 firefox 上却不行！

document.images.length 在 IE 上返回 3，在 Chrome 和 Firefox 上返回 0。你有什么解决这个问题的建议吗？！

【问题讨论】：

如果在函数之外打印 document.images 的长度会发生什么？我在 FF 上试过，它确实有效。
@Smokie 如果我在最后一个锚标记之后调用document.images.length，它将在所有浏览器上打印 3。
我们能看到完整的 foo() 函数吗？
你能给我们一个jsFiddle吗？
我敢打赌 foo() 函数应该有问题，如果你能把它贴在这里会很有帮助...

标签： javascript html dom cross-browser

【解决方案1】：

document.getElementsByTagName('img') 不适合你吗？

它不返回一个数组，而是一个节点列表。如果你需要一个数组：

 var imgNodes = document.getElementsByTagName('img');
 var images = [].slice.call(imgNodes);

【讨论】：

完全一样的结果。无论如何感谢您的回复:)
我敢说document.querySelectorAll('img') 也会返回一个空列表，是吗？
@Eng.Fouad 这些 img 标签是否在 iframe/frameset 中？
@Eng.Fouad 这就是所有 API 都不起作用的原因。您的 img 标签位于不同的文档中。首先解析正确的文档，然后让 getElementsByTagName 或 images 属性访问。

【解决方案2】：

或者使用 jQuery。

$('img').each(function(){
        // do something with $(this).
});

【讨论】：

为什么这被否决而凯的回答被投赞成票？这种选择与 Kay 的一样合理。
似乎它被解除了。我忘了！ +1！

【解决方案3】：

您的<img> 标记位于框架中的不同文档中。

首先在主文档中解析正确的框架对象。如果您有框架的名称，请执行以下操作：

var frame = document.querySelector("frame[name='NAME']");

如果你不命名你的帧，那么你将不得不在document.getElementsByTagName('frame');返回的帧数组中索引帧

要访问文档中的所有图像，您可以执行以下操作：

frame.contentDocument.images

或

frame.contentDocument.getElementsByTagName("img")

【讨论】：

+1 你是对的。我通过将document 替换为parent.frames[2].document 来解决它:)