JQuery – Espera a que se carguen dos iframes

Tengo un botón que carga dos páginas diferentes en dos iframes. Necesito esperar a que se completen esas cargas (como listo (), no me interesan las imágenes y otro contenido) y luego desencadenar otra acción. ¿Cómo puedo hacer esto?

Una forma sería que el contenido de iFrame señalice que está listo. Aquí hay una forma simplista de hacer esto:

Pagina principal

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

En cada iFrame

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

Usar $ .when () te ayudará (jQuery 1.5 y superior). Por ejemplo:

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

En mi opinión, la solución más segura podría ser tener un iframe principal que incrustara ambos iframes y esperar a que se cargue la página completa (la página principal):

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

El inconveniente es que son muchos iframes.