Capturar evento completo de carregamento de iframe

Respostas:

197

<iframe>elementos têm um loadevento para isso.


A decisão de como você escuta esse evento é sua, mas geralmente a melhor maneira é:

1) crie seu iframe programaticamente

Ele garante que seu loadouvinte seja sempre chamado anexando-o antes que o iframe comece a carregar.

<script>
var iframe = document.createElement('iframe');
iframe.onload = function() { alert('myframe is loaded'); }; // before setting 'src'
iframe.src = '...'; 
document.body.appendChild(iframe); // add it to wherever you need it in the document
</script>

2) javascript embutido , é outra maneira que você pode usar dentro da sua marcação HTML.

<script>
function onMyFrameLoad() {
  alert('myframe is loaded');
};
</script>

<iframe id="myframe" src="..." onload="onMyFrameLoad(this)"></iframe>

3) Você também pode anexar o ouvinte de evento após o elemento , dentro de uma <script>tag, mas lembre-se de que, nesse caso, há uma pequena chance de que o iframe já esteja carregado no momento em que você adiciona seu ouvinte. Portanto, é possível que não seja chamado (por exemplo, se o iframe for muito rápido ou for proveniente do cache).

<iframe id="myframe" src="..."></iframe>

<script>
document.getElementById('myframe').onload = function() {
  alert('myframe is loaded');
};
</script>

Veja também minha outra resposta sobre quais elementos também podem disparar esse tipo de loadevento

gblazex
fonte
2
Obrigado, isso faz exatamente o que eu precisava!
Jaime Garcia
1
Com esse método, você só pode executar uma única função quando o iframe estiver carregado. Veja minha resposta abaixo usando o addEventListenerque permite que vários retornos de chamada sejam executados no evento load.
Iest 5/08/15
1
Essa abordagem também é vulnerável a uma condição de corrida, pois o iframe pode carregar antes da execução da tag de script.
Iest 5/08/15
7
O evento de carregamento não funciona quando você tenta baixar um arquivo.
Jerry
1
Sim, isso não funciona no IE se o conteúdo do iFrame não for HTML, por exemplo, PDF. Veja isto: connect.microsoft.com/IE/feedback/details/809377/…
Sergey Gussak
27

Nenhuma das respostas acima funcionou para mim, no entanto, isso

ATUALIZAÇÃO :

Como o @doppleganger apontou abaixo, o carregamento desapareceu a partir do jQuery 3.0, então aqui está uma versão atualizada que usa on. Observe que isso realmente funcionará no jQuery 1.7+, para que você possa implementá-lo dessa maneira, mesmo que ainda não esteja no jQuery 3.0.

$('iframe').on('load', function() {
    // do stuff 
});
roryok
fonte
1
A partir do jQuery 3.0, loadse foi. Por favor, use em seu .on('load', function() { ... })lugar.
Doppelganger
Se você estiver usando jqueryou jqLiteentão este é o caminho a seguir!
Peter Peter
11

Existe outra maneira consistente ( apenas para o IE9 + ) no JavaScript vanilla para isso:

const iframe = document.getElementById('iframe');
const handleLoad = () => console.log('loaded');

iframe.addEventListener('load', handleLoad, true)

E se você estiver interessado em Observables, isso faz o truque:

return Observable.fromEventPattern(
  handler => iframe.addEventListener('load', handler, true),
  handler => iframe.removeEventListener('load', handler)
);
aitorllj93
fonte
É uma preocupação que meu depurador pare no meu ponto de interrupção handleLoad()antes de ver o iFrame renderizado? Espero que seja um problema de renderização e não um problema de carregamento de conteúdo.
Sridhar Sarnobat
que tal capturar esse evento pelo jquery quando o iframe já estiver lá ... ou seja: o iframe não é criado pelo jquery.
Gmuruh 13/11/19
3

Observe que o evento onload parece não disparar se o iframe for carregado quando estiver fora da tela. Isso ocorre frequentemente ao usar as guias "Abrir em nova janela" / w.

Kenneth M. Kolano
fonte
2
também com iframe com visor nenhum;)
Felipe N Moura
1

Você também pode capturar o evento jquery ready da seguinte maneira:

$('#iframeid').ready(function () {
//Everything you need.
});

Aqui está um exemplo de trabalho:

http://jsfiddle.net/ZrFzF/

Gonza Oviedo
fonte
16
Não acho que esse código faça o que você pensa. Você pode substituir o selector "#iFrame" em sua mexer com qualquer coisa e o alerta ainda incêndios
roryok
6
Além do @roryok, o ready é acionado quando o DOM está pronto, nem a página inteira é carregada.
10139 Ivan Nikitin
1
ready é acionado quando o DOM está pronto e js pode ser executado, não quando o conteúdo é carregado.
Sergey Gussak
2
$ ("# iframeid"). ready aciona a função quando o elemento está no domínio. Não quando o ifram terminou de carregar.
Popsyjunior 19/05
chamou apenas uma vez :(
Hossein Badrnezhad