Retorno de chamada do Javascript quando o carregamento do IFRAME?

Preciso executar um retorno de chamada quando um IFRAME terminar de carregar. Não tenho controle sobre o conteúdo no IFRAME, portanto não posso acionar o retorno de chamada a partir daí.

Esse IFRAME é criado programaticamente e preciso passar seus dados como uma variável no retorno de chamada, além de destruir o iframe.

Alguma ideia?

EDITAR:

Aqui está o que eu tenho agora:

function xssRequest(url, callback)
{
    var iFrameObj = document.createElement('IFRAME');
    iFrameObj.src = url;            
    document.body.appendChild(iFrameObj);   

    $(iFrameObj).load(function() 
    {
        document.body.removeChild(iFrameObj);
        callback(iFrameObj.innerHTML);
    });
}

Esse retorno de chamada antes do carregamento do iFrame, portanto, o retorno de chamada não possui dados retornados.

Primeiro, usando o nome da função xssRequest , parece que você está tentando uma solicitação entre sites - que, se estiver certo, não poderá ler o conteúdo do iframe.

Por outro lado, se o URL do iframe estiver no seu domínio, você poderá acessar o corpo, mas descobri que se eu usar um tempo limite para remover o iframe, o retorno de chamada funcionará bem:

// possibly excessive use of jQuery - but I've got a live working example in production
$('#myUniqueID').load(function () {
  if (typeof callback == 'function') {
    callback($('body', this.contentWindow.document).html());
  }
  setTimeout(function () {$('#frameId').remove();}, 50);
});

Estou usando o jQuery e surpreendentemente isso parece carregar, pois acabei de testar e carregar uma página pesada e não recebi o alerta por alguns segundos até ver o carregamento do iframe:

$('#the_iframe').load(function(){
    alert('loaded!');
});

Portanto, se você não quiser usar o jQuery, dê uma olhada no código-fonte e veja se essa função se comporta de maneira diferente com os elementos DOM do iframe. Também testei apenas no cromo mais recente.

O innerHTML do seu iframe está em branco porque sua tag iframe não envolve nenhum conteúdo no documento pai. Para obter o conteúdo da página mencionada pelo atributo src do iframe, é necessário acessar a propriedade contentDocument do iframe. Uma exceção será lançada se o src for de um domínio diferente. Esse é um recurso de segurança que impede a execução de JavaScript arbitrário na página de outra pessoa, o que criaria uma vulnerabilidade de script entre sites. Aqui está um exemplo de código que ilustra o que estou falando:

<script src="http://prototypejs.org/assets/2009/8/31/prototype.js" type="text/javascript"></script>

<h1>Parent</h1>

<script type="text/javascript">
function on_load(iframe) {
  try {
    // Displays the first 50 chars in the innerHTML of the
    // body of the page that the iframe is showing.
    // EDIT 2012-04-17: for wider support, fallback to contentWindow.document
    var doc = iframe.contentDocument || iframe.contentWindow.document;
    alert(doc.body.innerHTML.substring(0, 50));
  } catch (e) {
    // This can happen if the src of the iframe is
    // on another domain
    alert('exception: ' + e);
  }
}
</script>
<iframe id="child" src="iframe_content.html" onload="on_load(this)"></iframe>

Para aprofundar o exemplo, tente usar isso como o conteúdo do iframe:

<h1>Child</h1>

<a href="http://www.google.com/">Google</a>

<p>Use the preceeding link to change the src of the iframe
to see what happens when the src domain is different from
that of the parent page</p>

Eu tive que fazer isso nos casos em que documentos como documentos do Word e PDFs estavam sendo transmitidos para o iframe e encontrei uma solução que funciona muito bem. A chave está lidando com o onreadystatechangedevento no iframe.

Digamos que o nome do seu quadro seja "myIframe". Primeiro, em algum lugar da inicialização do código (eu o faço em qualquer lugar após o iframe), adicione algo assim para registrar o manipulador de eventos:

document.getElementById('myIframe').onreadystatechange = MyIframeReadyStateChanged;

Não pude usar um atributo onreadystatechage no iframe, não me lembro por que, mas o aplicativo teve que funcionar no IE 7 e no Safari 3, portanto isso pode ter sido um fator.

Aqui está um exemplo de como obter o estado completo:

function MyIframeReadyStateChanged()
{
    if(document.getElementById('myIframe').readyState == 'complete')
    {
        // Do your complete stuff here.
    }
}

Eu queria ocultar a div de spinner em espera quando o conteúdo do quadro i estiver totalmente carregado no IE, tentei literalmente todas as soluções mencionadas no Stackoverflow.Com, mas com nada funcionou como eu queria.

Então tive uma ideia de que, quando o conteúdo do quadro i estiver totalmente carregado, o evento de carregamento $ (Window) poderá ser acionado. E foi exatamente o que aconteceu. Então, eu escrevi este pequeno script e funcionei como mágica:

     $(window).load(function () {
     //alert("Done window ready ");
     var lblWait = document.getElementById("lblWait");
     if (lblWait != null ) {
         lblWait.style.visibility = "false";
         document.getElementById("divWait").style.display = "none";
     }
 });

Espero que isto ajude.

Eu tive um problema semelhante ao seu. O que fiz foi usar algo chamado jQuery. O que você faz no código javascript é o seguinte:

$(function(){ //this is regular jQuery code. It waits for the dom to load fully the first time you open the page.

    $("#myIframeId").load(function(){
       callback($("#myIframeId").html());
       $("#myIframeId").remove();

    });

});

Parece que você exclui o iFrame antes de pegar o html. Agora, vejo um problema com isso: p

Espero que isto ajude :).

Eu tenho um código semelhante em meus projetos que funciona bem. Adaptando meu código à sua função, uma solução pode ser a seguinte:

function xssRequest(url, callback)
{
    var iFrameObj = document.createElement('IFRAME');
    iFrameObj.id = 'myUniqueID';
    document.body.appendChild(iFrameObj);       
    iFrameObj.src = url;                        

    $(iFrameObj).load(function() 
    {
        callback(window['myUniqueID'].document.body.innerHTML);
        document.body.removeChild(iFrameObj);
    });
}

Talvez você tenha um innerHTML vazio porque (uma ou ambas as causas): 1. você deve usá-lo contra o elemento body 2. você removeu o iframe do DOM da sua página

Eu acho que o evento load está correto. O que não é certo é a maneira como você usa para recuperar o conteúdo do iframe content dom.

O que você precisa é o html da página carregada no iframe e não o html do objeto iframe.

O que você precisa fazer é acessar o documento de conteúdo iFrameObj.contentDocument. Isso retorna o domínio da página carregada dentro do iframe, se estiver no mesmo domínio da página atual.

Eu recuperaria o conteúdo antes de remover o iframe.

Eu testei no firefox e na ópera.

Então eu acho que você pode recuperar seus dados com $(childDom).html()ou$(childDom).find('some selector') ...

Eu tive exatamente o mesmo problema no passado e a única maneira de corrigi-lo foi adicionar o retorno de chamada na página iframe. Claro que isso só funciona quando você tem controle sobre o conteúdo do iframe.

Usar onloadattrbute resolverá seu problema.

Aqui está um exemplo.

function a() {
alert("Your iframe has been loaded");
}

<iframe src="https://stackoverflow.com" onload="a()"></iframe>

É isso que voce quer?

Clique aqui para mais informações.