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?

Is this an AJAX load? If yes then what AJAX library do you use? — Nikhil, Mar 15 '11 at 16:53
No, not AJAX. One is a form.submit() and the other I'm just setting the src attribute of the iframe. — Jim, Mar 15 '11 at 17:15

score 5 · Accepted Answer · answered Mar 15 '11 at 18:04

5

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

answered Mar 15 '11 at 18:04

Nik Kalyani

916
5
10

Unfortunately I don't own the pages that are being loaded in the iframes. – Jim Mar 15 '11 at 18:47
2

You can use the same approach. Just attach an onload event handler to each iframe. $("#iframe1").load(function() { doneLoading(1) }); – Nik Kalyani Mar 15 '11 at 21:24
You set [0] and [1] to false, then use [1] and [2]. This is JS so [2] == false anyway. Flawed code and no waiting/callback mechanism. – Lodewijk Sep 14 '14 at 19:02

score 4 · Answer 2 · edited Dec 06 '11 at 18:21

4

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.' );
   });

edited Dec 06 '11 at 18:21

David d C e Freitas

7,481
4
58
67

answered Mar 15 '11 at 17:00

Dmitry Evseev

11,533
3
34
48

he specified that is NOT AJAX – KnF Mar 21 '13 at 00:27
Nice catch (y) But clarification that it's not ajax was added 15 minutes later after I've posted this answer.. a year ago – Dmitry Evseev Mar 21 '13 at 09:56

score 1 · Answer 3 · answered May 23 '11 at 21:22

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

JQuery - Wait for two iframes to load

3 Answers3

Linked