Document.images does not load on chrome or firefox, but loads in IE

Question

I have an attached <a> tag with an image tag <img> inside it, and I call javascript functions on this anchor tag as follows:

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

Inside the foo() function, I used document.images to retrieve an array containing 3 images. It works well in IE, but it does not work on chrome and firefox!

document.images.length returns 3 in IE and returns 0 in Chrome and Firefox. Do you have any suggestions for solving this problem ?!

Answer 1

The <img> tags are in another document in the frame.

First enable the right frame object in the main document. If you have a name for the frame, do the following:

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

If you do not name your frames, you will need to index the frame in the array of frames returned by document.getElementsByTagName('frame');

To access all the images in a document that you can take:

 frame.contentDocument.images 

or

 frame.contentDocument.getElementsByTagName("img") 

Answer 2

There won't be document.getElementsByTagName('img') for you?

It does not return an array, but a list of nodes. If you need an array:

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

Answer 3

Or use jQuery.

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