javascript - pagina - Detectando cuando el contenido del iframe se ha cargado(navegador cruzado)

etiqueta iframe video

Question

Intento detectar cuando un iframe y su contenido se han cargado pero no tienen mucha suerte. Mi aplicación toma algunas entradas en los campos de texto en la ventana primaria y actualiza el iframe para proporcionar una ''vista previa en vivo''

Comencé con el siguiente código (YUI) para detectar cuándo se produce el evento de carga iframe.

$E.on(''preview-pane'', ''load'', function(){
previewBody = $(''preview-pane'').contentWindow.document.getElementsByTagName(''body'')[0];
}

''panel de vista previa'' es la ID de mi iframe y estoy usando YUI para adjuntar el controlador de eventos. Sin embargo, al intentar acceder al cuerpo en mi devolución de llamada (en caso de carga iframe) falla, creo que porque el iframe se carga antes de que el controlador de eventos esté listo. Este código funciona si retraso la carga del iframe haciendo que el script php que lo genera duerma.

Básicamente, estoy preguntando cuál es el enfoque correcto en todos los navegadores para detectar cuándo se ha cargado el iframe y su documento está listo.

Answer 1

para detectar cuando el iframe se ha cargado y su documento está listo?

Es ideal si puede obtener el iframe para que se lo diga desde un script dentro del marco. Por ejemplo, podría llamar a una función primaria directamente para decirle que está lista. Siempre se requiere cuidado con la ejecución del código de cuadros cruzados, ya que las cosas pueden suceder en un orden que no espera. Otra alternativa es establecer ''var isready = true;'' en su propio ámbito, y hacer que el script padre olfatee para ''contentWindow.isready'' (y agregue el controlador onload si no es así).

Si por alguna razón no es práctico que el documento iframe coopere, usted tiene el problema tradicional de la carrera de carga, es decir, que incluso si los elementos están uno al lado del otro:

<img id="x" ... />
<script type="text/javascript">
document.getElementById(''x'').onload= function() {
...
};
</script>

no hay garantía de que el artículo no se haya cargado antes de que se ejecute el script.

Las formas de salir de las carreras de carga son:

1. en IE, puede usar la propiedad ''readyState'' para ver si algo ya está cargado;

2. Si el elemento disponible solo con JavaScript habilitado es aceptable, puede crearlo dinámicamente, configurando la función de evento ''onload'' antes de configurar el origen y adjuntarlo a la página. En este caso, no se puede cargar antes de que se establezca la devolución de llamada;

3. la forma antigua de incluirlo en el marcado:

   <img onload="callback(this)" ... />

Los manipuladores en línea "en algo" en HTML son casi siempre lo incorrecto y deben evitarse, pero en este caso a veces es la opción menos mala.

Answer 2

Para aquellos que usan React, detectar un evento de carga de iframe del mismo origen es tan simple como configurar el onLoad eventos onLoad en el elemento iframe.

<iframe src={''path-to-iframe-source''} onLoad={this.loadListener} frameBorder={0} />

Answer 3

Para cualquiera que use Ember, esto debería funcionar como se esperaba:

<iframe onLoad={{action ''actionName''}} frameborder=''0'' src={{iframeSrc}} />

Answer 4

Vea this publicación en el blog. Utiliza jQuery, pero debería ayudarte incluso si no lo estás usando.

Básicamente, agregue esto a su document.ready()

$(''iframe'').load(function() {
RunAfterIFrameLoaded();
});