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>
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.
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.
É 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.
Respostas:
<iframe>
elementos têm umload
evento 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
load
ouvinte seja sempre chamado anexando-o antes que o iframe comece a carregar.2) javascript embutido , é outra maneira que você pode usar dentro da sua marcação HTML.
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).Veja também minha outra resposta sobre quais elementos também podem disparar esse tipo de
load
eventofonte
addEventListener
que permite que vários retornos de chamada sejam executados no evento load.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.fonte
load
se foi. Por favor, use em seu.on('load', function() { ... })
lugar.jquery
oujqLite
então este é o caminho a seguir!Existe outra maneira consistente ( apenas para o IE9 + ) no JavaScript vanilla para isso:
E se você estiver interessado em Observables, isso faz o truque:
fonte
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.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.
fonte
Você também pode capturar o evento jquery ready da seguinte maneira:
Aqui está um exemplo de trabalho:
http://jsfiddle.net/ZrFzF/
fonte