Onload event for iframe

Question

Question

Let’s say on my website I have a iframe reserved to upload a possible external page, and this iframe be with display:none, how I could create in callback to fire at the end of loading this page, to perform a display:block?

Note

Remembering that I might want full content, which includes uploading the images, or only partial HTML. It would be the same event?

Answer 1

You can use the event load, that will be fired when all resources are loaded:

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

To trigger the event when only partial HTML loading happens, DOCS:

The Domcontentloaded event is triggered when the initial HTML document has been fully loaded and parsed, without waiting for style sheets, images, and subframes to finish loading.

Fez:

document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM completamente carregado e analisado");
    iframe.style.display = 'block';
});