Capturar evento completo de carga de iframe

Respuestas:

197

<iframe>los elementos tienen un loadevento para eso.

La forma en que escuche ese evento depende de usted, pero generalmente la mejor manera es:

1) crea tu iframe programáticamente

Se asegura de que loadsiempre se llame a su oyente al adjuntarlo antes de que el iframe comience a cargarse.

<script>
var iframe = document.createElement('iframe');
iframe.onload = function() { alert('myframe is loaded'); }; // before setting 'src'
iframe.src = '...'; 
document.body.appendChild(iframe); // add it to wherever you need it in the document
</script>

2) JavaScript en línea , es otra forma que puede usar dentro de su marcado HTML.

<script>
function onMyFrameLoad() {
  alert('myframe is loaded');
};
</script>

<iframe id="myframe" src="..." onload="onMyFrameLoad(this)"></iframe>

3) También puede adjuntar el detector de eventos después del elemento , dentro de una <script>etiqueta, pero tenga en cuenta que en este caso, existe una pequeña posibilidad de que el iframe ya esté cargado cuando llegue el momento de agregar su detector. Por lo tanto, es posible que no se llame (p. Ej., Si el iframe es muy rápido o proviene de la memoria caché).

<iframe id="myframe" src="..."></iframe>

<script>
document.getElementById('myframe').onload = function() {
  alert('myframe is loaded');
};
</script>

También vea mi otra respuesta sobre qué elementos también pueden activar este tipo de loadevento

gblazex
fuente
2
¡Gracias, esto hace exactamente lo que necesitaba!
Jaime Garcia
1
Con este método, solo puede ejecutar una única función cuando se carga el iframe. Vea mi respuesta a continuación usando addEventListenerque permite que se ejecuten múltiples devoluciones de llamada en el evento de carga.
Iest
1
Este enfoque también es vulnerable a una condición de carrera, ya que el iframe podría cargarse antes de que se ejecute la etiqueta del script.
Iest
77
El evento de carga no funciona cuando intenta descargar un archivo.
Jerry
1
Sí, eso no funciona en IE si el contenido de iFrame no es HTML, por ejemplo, PDF. Vea esto: connect.microsoft.com/IE/feedback/details/809377/…
Sergey Gussak
27

Ninguna de las respuestas anteriores funcionó para mí, sin embargo, esto sí

ACTUALIZACIÓN :

Como @doppleganger señaló a continuación, la carga ha desaparecido a partir de jQuery 3.0, así que aquí hay una versión actualizada que utiliza on. Tenga en cuenta que esto realmente funcionará en jQuery 1.7+, por lo que puede implementarlo de esta manera incluso si aún no está en jQuery 3.0.

$('iframe').on('load', function() {
    // do stuff 
});
roryok
fuente
1
A partir de jQuery 3.0, loadse ha ido. Por favor, use .on('load', function() { ... })en su lugar.
Doppelganger
Si está usando jqueryo jqLiteeste es el camino a seguir!
Peter
11

Hay otra forma consistente ( solo para IE9 + ) en JavaScript vainilla para esto:

const iframe = document.getElementById('iframe');
const handleLoad = () => console.log('loaded');

iframe.addEventListener('load', handleLoad, true)

Y si estás interesado en Observables, este es el truco:

return Observable.fromEventPattern(
  handler => iframe.addEventListener('load', handler, true),
  handler => iframe.removeEventListener('load', handler)
);
aitorllj93
fuente
¿Es preocupante que mi depurador se detenga en mi punto de interrupción handleLoad()antes de ver el renderizado de iFrame? Espero que sea solo un problema de representación en lugar de un problema de carga de contenido.
Sridhar Sarnobat
qué tal capturar ese evento mediante jquery cuando el iframe ya está allí ... es decir: jquery no crea el iframe.
Gumuruh
3

Tenga en cuenta que el evento de carga no parece activarse si el iframe se carga cuando está fuera de la pantalla. Esto ocurre frecuentemente cuando se usan las pestañas "Abrir en una nueva ventana" / w.

Kenneth M. Kolano
fuente
2
también con iframes con display none;)
Felipe N Moura
1

También puede capturar el evento jquery ready de esta manera: 

$('#iframeid').ready(function () {
//Everything you need.
});

Aquí hay un ejemplo de trabajo:

http://jsfiddle.net/ZrFzF/

Gonza Oviedo
fuente
16
No creo que ese código haga lo que tú crees que hace. Puede reemplazar ese selector "#iFrame" en su violín con cualquier cosa y la alerta aún se dispara
roryok
66
Además de @roryok, ready se dispara cuando DOM está listo, no se carga toda la página.
Ivan Nikitin
1
ready se dispara cuando el DOM está listo y se puede ejecutar js, no cuando se carga el contenido.
Sergey Gussak
2
$ ("# iframeid"). ready activa la función cuando el elemento está en el dom. No cuando el ifram ha terminado de cargarse.
Popsyjunior
solo llamó una vez :(
Hossein Badrnezhad