Detectar cuándo se ha cargado el contenido de Iframe (navegador cruzado)

Estoy tratando de detectar cuándo se ha cargado un iframe y su contenido, pero no tengo mucha suerte. Mi aplicación toma alguna entrada en campos de texto en la ventana principal y actualiza el iframe para proporcionar una 'vista previa en vivo'

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

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

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

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

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

Es ideal si puede hacer que el iframe se lo diga a sí mismo desde un script dentro del marco. Por ejemplo, podría llamar a una función principal directamente para indicarle que está lista. Siempre se requiere cuidado con la ejecución de código entre marcos, ya que pueden suceder cosas en un orden inesperado. Otra alternativa es establecer 'var isready = true;' en su propio alcance, y haga que el script principal rastree 'contentWindow.isready' (y agregue el controlador de carga si no es así).

Si por alguna razón no es práctico que el documento iframe coopere, tienes el problema tradicional de carrera de carga, es decir, 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 elemento 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 tener el elemento disponible solo con JavaScript habilitado es aceptable, puede crearlo dinámicamente, configurando la función de evento 'onload' antes de configurar la fuente y agregarla a la página. En este caso, no se puede cargar antes de que se establezca la devolución de llamada;

3. la forma de la vieja escuela de incluirlo en el marcado:

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

Los manejadores "onsomething" en línea en HTML son casi siempre incorrectos y deben evitarse, pero en este caso, a veces es la opción menos mala.

Vea esta publicación de blog. Utiliza jQuery, pero debería ayudarte incluso si no lo estás utilizando.

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

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

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

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

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

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