Detectando quando o conteúdo Iframe foi carregado (navegador cruzado)

Estou tentando detectar quando um iframe e seu conteúdo foram carregados, mas não estou tendo muita sorte. Meu aplicativo recebe alguma entrada em campos de texto na janela principal e atualiza o iframe para fornecer uma 'visualização ao vivo'

Comecei com o seguinte código (YUI) para detectar quando ocorre o evento de carregamento do iframe.

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

'painel de visualização' é o ID do meu iframe e estou usando YUI para anexar o manipulador de eventos. No entanto, a tentativa de acessar o corpo em meu retorno de chamada (ao carregar o iframe) falha, acho que porque o iframe carrega antes que o manipulador de eventos esteja pronto. Este código funciona se eu atrasar o carregamento do iframe, fazendo o script php que o gera dormir.

Basicamente, estou perguntando qual é a abordagem correta entre navegadores para detectar quando o iframe foi carregado e seu documento está pronto.

detectar quando o iframe foi carregado e seu documento está pronto?

É ideal se você puder fazer com que o iframe se identifique a partir de um script dentro do frame. Por exemplo, ele poderia chamar uma função pai diretamente para dizer que está pronto. É sempre necessário cuidado com a execução de código cross-frame, pois as coisas podem acontecer em uma ordem inesperada. Outra alternativa é definir 'var isready = true;' em seu próprio escopo e fazer com que o script pai detecte 'contentWindow.isready' (e adicione o manipulador onload se não).

Se por algum motivo não for prático ter o documento iframe cooperando, você tem o problema tradicional de corrida de carga, ou seja, mesmo que os elementos estejam próximos um do outro:

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

não há garantia de que o item ainda não tenha sido carregado no momento em que o script for executado.

As maneiras de sair das corridas de carga são:

1. no IE, você pode usar a propriedade 'readyState' para ver se algo já está carregado;

2. se ter o item disponível apenas com JavaScript habilitado for aceitável, você pode criá-lo dinamicamente, definindo a função de evento 'onload' antes de definir a origem e anexar à página. Nesse caso, ele não pode ser carregado antes que o retorno de chamada seja definido;

3. a maneira tradicional de incluí-lo na marcação:

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

Manipuladores 'onsomething' embutidos em HTML são quase sempre a coisa errada e devem ser evitados, mas neste caso às vezes é a opção menos ruim.

Veja esta postagem do blog. Ele usa jQuery, mas deve ajudá-lo mesmo se você não estiver usando.

Basicamente, você adiciona isso ao seu document.ready()

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

Para aqueles que usam React, detectar um evento de carregamento de iframe de mesma origem é tão simples quanto definir o onLoadouvinte de evento no elemento iframe.

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

Para qualquer pessoa que use o Ember, isso deve funcionar conforme o esperado:

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