Existe uma maneira de capturar quando o conteúdo de um iframe foi totalmente carregado a partir da página pai?
Existe uma maneira de capturar quando o conteúdo de um iframe foi totalmente carregado a partir da página pai?
Respostas:
<iframe>
elementos têm um load
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.
<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 load
evento
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.
$('iframe').on('load', function() {
// do stuff
});
load
se foi. Por favor, use em seu .on('load', function() { ... })
lugar.
jquery
ou jqLite
então este é o caminho a seguir!
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)
);
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.
Você também pode capturar o evento jquery ready da seguinte maneira:
$('#iframeid').ready(function () {
//Everything you need.
});
Aqui está um exemplo de trabalho: