CODEWITHSUNDEEP
javascripthtmldomcross-browser
Eng.Fouad
Eng.Fouad

Reputation: 117675

document.images not loaded on chrome or firefox, but it is loaded on IE

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

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

Inside foo() function, I used document.images to retrieve an array that contains the 3 images. It works well in IE, but it doesn't work on chrome and firefox!

document.images.length returns 3 on IE, and returns 0 on Chrome and Firefox. Do you have any suggestions to solve this issue?!

Upvotes: 3

Views: 1181

Answers (3)

Ashwin Prabhu
Ashwin Prabhu

Reputation: 7634

Your <img> tags are in a different document in a frame.

First resolve the right frame object in the main document. If you have a name for the frame, then do something like the following:

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

If you don't name your frames, then you will have to index the frame on the array of frames returned by document.getElementsByTagName('frame');

To access all the images in the document you can do:

frame.contentDocument.images

or

frame.contentDocument.getElementsByTagName("img")

Upvotes: 1

Taher
Taher

Reputation: 12050

Or use jQuery. 

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

Upvotes: -1

Kijewski
Kijewski

Reputation: 26043

Wouldn't document.getElementsByTagName('img') work for you?

It doesn't return an array, but a node list. If you need an array:

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

Upvotes: 3

Related Questions