javascript - ejemplo - Capturar iframe cargar evento completo

iframe onload

Question

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

Answer 1

<iframe> elementos <iframe> tienen un evento de load para eso.

Cómo escuchas ese evento depende de ti, pero generalmente la mejor manera es:

1) crea tu iframe programáticamente

Se asegura de que su detector de load siempre se llame adjuntándolo 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 utilizar 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 etiqueta <script> , pero tenga en cuenta que, en este caso, hay una pequeña posibilidad de que el iframe ya esté cargado para cuando tenga que agregar su oyente. Por lo tanto, es posible que no se invoque (por ejemplo, si el iframe es muy rápido o proviene de la 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 disparar este tipo de evento de load

Answer 2

Hay otra forma consistente ( solo para IE9 + ) en JavaScript estándar para esto:

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

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

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

return Observable.fromEventPattern(
  handler => iframe.addEventListener(''load'', handler, true),
  handler => iframe.removeEventListener(''load'', handler)
);

Answer 3

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

ACTUALIZAR :

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

$(''iframe'').on(''load'', function() {
    // do stuff 
});

Answer 4

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/