Capturar evento completo de carga de iframe

¿Hay alguna forma de capturar cuando el contenido de un iframe se ha cargado completamente desde la página principal?

<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

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

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)
);

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.

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/