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

Question

Estoy tratando de detectar cuándo se ha cargado un iframe y su contenido pero no tiene mucha suerte. Mi solicitud toma alguna entrada en campos de texto en la ventana padre y actualiza el marco flotante para proporcionar una 'vista previa en vivo'

Empecé con el siguiente código (YUI) para detectar cuando se produce el evento de carga de marco flotante.

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

'vista previa de una ventana' es el ID de mi iframe y estoy usando YUI para fijar 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 los navegadores para detectar cuándo se ha cargado el iframe y su documento está listo.

Answer 1

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

Es ideal si puedes obtener el iframe para que te diga a ti mismo 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 tener el documento marco flotante cooperar, usted tiene el problema de la carga de la carrera tradicional, 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 carga-razas son:

1. en IE, puede utilizar la propiedad ‘readyState’ para ver si hay algo que ya está cargada;

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. el camino de la vieja escuela de incluirla en el marcado:

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

Inline 'onsomething' manipuladores en HTML son casi siempre las cosas mal y que deben evitarse, pero en este a veces es la opción menos mala.

Answer 2

Ver la publicación del blog this. Utiliza jQuery, pero debería ayudarte incluso si no lo estás usando.

Básicamente se agrega esto a su document.ready()

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

Answer 3

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

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

Answer 4

Para cualquier persona que utilice Ember, esto debería funcionar como se esperaba:

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