2

Questão

Digamos que em meu site eu tenha um iframe reservado para carregar uma possível pagina externa, e este iframe esteja com display:none, como eu poderia criar em callback para disparar ao final no carregamento desta pagina, para realizar um display:block?

Nota

Lembrando que eu poderia querer conteúdo completo, o que inclui o carregamento das imagens, ou parcial apenas do HTML. Seria o mesmo evento?

0

1 Resposta 1

5

Podes usar o evento load, que vai ser disparado quando todos os recursos forem carregados:

const iframe = document.getElementById('iframe');

window.addEventListener("load", function(event) {
    console.log('Está tudo carregado');
    iframe.style.display = 'block';
});
iframe {
 display: none; 
}
<iframe id="iframe" width="560" height="315" src="https://www.youtube.com/embed/gQghzrNo68s" frameborder="0" allowfullscreen></iframe>

DOCS

Para disparares o evento quando acontece só o carregamento parcial do HTML, DOCS:

O evento DOMContentLoaded é acionado quando o documento inicial HTML foi completamente carregado e analisado, sem aguardar por folhas de estilo, imagens, e subframes para encerrar o carregamento.

Fazes:

document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM completamente carregado e analisado");
    iframe.style.display = 'block';
});
4
  • Tem alguma diferença quanto carregar imagens ou apenas o html? Commented 24/01/2017 às 17:13
  • Coloquei, esse acrescento @GuilhermeLautert
    – Miguel
    Commented 24/01/2017 às 17:13
  • Perfeito, completo :D Commented 24/01/2017 às 17:14
  • hehe de nada @GuilhermeLautert, ainda bem.
    – Miguel
    Commented 24/01/2017 às 17:16

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .