JQuery - Wait for two iframes to load

Question

I have a button that loads two different pages in two iframes. I need to wait for those loads to complete (like ready(), don't care about images and other content) and then trigger another action. How can I do this?

Answer 1

One way would be for the iFrame content to signal that it is ready. Here is a simplistic way to do this:

Main Page

var status = [false, false];

function doneLoading(index)
{
   status[index] = true;
   if (status[1] && status[2])
      alert("Both iframes are done loading");
}

In each iFrame

$(document).ready(function() { parent.doneLoading(1) }); // or 2

Answer 2

Using $.when() will help you (jQuery 1.5 and higher). For example:

function doAjax(){
   return $.get('foo.htm');
}

function doMoreAjax(){
   return $.get('bar.htm');
}

$.when( doAjax(), doMoreAjax() )
   .then(function(){
      console.log( 'I fire once BOTH ajax requests have completed!' );
   })
   .fail(function(){
      console.log( 'I fire if one or more requests failed.' );
   });

Answer 3

In my opinion, the safest solution might be to have a parent iframe that would embedd both iframes and wait for the entire page (the parent page) to load :

$(parent).load(function(){
   ... //if you get there then the 2 iframes are already loaded
}

The drawback is that it's a lot of iframes