ansaurus

Question

Answer 1

+1 A:

First, <script> tags should go either in the <head> or the <body> but not in between!

I would change your naming scheme slightly to this:

<iframe id="iframe1" src="iframe.html" width="800" height="100"></iframe>
<div id="iframe1-L">Loading...</div>

<iframe id="iframe2" src="blah.html" width="800" height="100"></iframe>
<div id="iframe2-L">Loading...</div>

Now you just have to loop through all the iframes, and you can easily access the corresponding div by changing the ID to +"-L"

To get all the iframe elements use getElementsByTagName(), then iterate over those with a for loop:

Something like this:

var i, frames;
frames = document.getElementsByTagName("iframe");
for (i = 0; i < frames.length; ++i)
{
      // The iFrame
    frames[i].style.display = "none";
      // The corresponding DIV
    getElementById(frames[i].id + "-L").style.display = "";
    frames[i].onload = function()
    {
        getElementById(frames[i].id + "-L").style.display = "none";
        frames[i].style.display = "";
    }
}

Peter Ajtai 2010-09-22 22:17:04

Answer 2

+1 A:

Using plain vanilla JavaScript: Assuming the loading_iframe function performs the exact same action for every iframe, what you can do is have an array that contains the IDs of all iframes, then loop through that array.

function load_iframes() {
    iframes = ["loading_iframe1", "loading_iframe2", "loading_iframe3"];
    for (i = 0; i < iframes.length; i++) {
        loading_iframe(iframes[i]);
    }
}

function loading_iframe(iframe_id){
    document.getElementById(iframe_id).style.display = "none";
    document.getElementById('loading').style.display = "";
    document.getElementById(iframe_id).onload = function(){
        document.getElementById('loading').style.display = "none";
        document.getElementById(iframe_id).style.display = "";
    }
}

Alternatively, this version of load_iframes will work if you're going to have a sequential number in your iframe IDs starting at 1 and ending at 50, and you don't need to list all your iframe IDs in an array:

function load_iframes() {
    num_iframes = 50;
    for (i = 1; i <= num_iframes; i++) {
        loading_iframe("loading_iframe" + i);
    }
}

Using jQuery: Give all iframes a CSS class such as loading_iframe. You can then use jQuery to select all elements that have the loading_iframe class.

Jeff 2010-09-22 22:17:33

Answer 3

A:

Just adding to Jeff's answer: I really recommend you to check out jQuery. It is very powerful and a task like this should be fairly simple. Given that you give each iFrame a class "loading_iframe" you can do somethink like:

$(".loading_iframe").each(function(index) {
   console.log(this); ;
});

The console.log() call assumes that you use FireBug in Firefox or Google Chrome. Not sure if that works in other browsers.

Also see the document for .each().

sspier 2010-09-22 22:36:37

ansaurus

tags:

views:

answers:

Get all iframe elements

related questions