javascript - document.images 未在 chrome 或 firefox 上加载，但已在 IE 上加载

Question

我有一个<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。你有什么解决这个问题的建议吗？！

Answer 1

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

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

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

Answer 2

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

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

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

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

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

frame.contentDocument.images

或者

frame.contentDocument.getElementsByTagName("img")

Answer 3

或者使用 jQuery。

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