Question

I have an array of URL’s and I want to create one iframe for each URL that I have.
But what I want is create and load the next iframe only when the previous was totally loaded.

This is the function that create the iframe:

function loadSubsequencePages(links){
var id = document.getElementsByTagName("iframe").length;

    for(var i=0; i<links.length;i++){
        var frame = document.createElement("iframe");
        frame.setAttribute("id","frame"+id);
        frame.setAttribute("src","about:blank");
        document.getElementById('frames').appendChild(frame);
        changeLoc(document.getElementById("frame"+id),links[i].href);
    }

}

I want to move to the next i only when the actual iframe that I create was loaded.

this is the function that change the URL:

function changeLoc(frm,loc) {
        frm.webNavigation.loadURI(loc, 
                                frm.webNavigation.LOAD_FLAGS_NONE,
                                null, null, null
                              );
    }

How can I do that?

Answer 1

That depends.

1. Do you have control over the pages shown in the IFRAMEs?
2. Are they
   on the same domain as the hosting page?

There are four scenarios:

• If they are on the same domain, you can access the content through
  JavaScript.

• If they are on the same domain, and you can modify the loaded
  pages, you can tell the parent frame when the onload event
  fires from the page loaded in the IFRAME.

• If they are not on the same domain, and you can modify the loaded
  page, security restrictions will block direct communication. But you
  can ping a central repository on the server from the loaded page when
  the onload event fires

• If they are not on the same domain, and you can’t modify the
  loaded page… Well you’re in trouble… 🙂 You will not be able to
  check when the pages have finished loading…. Well.. You could create some ugly
  timer loading the pages at a set interval… But don’t tell anybody I
  told you so… 😉