Como saber se o iframe carregou?

Existem várias formas:

1. Através do evento load: A forma mais comum e confiável.

   const iframeElement = document.getElementById('myIframe');
   
   iframeElement.onload = function() {
     // Código que é executado após o carregamento do iframe
     console.log('iframe carregado!');
   };
   

2. Através do atributo onload em HTML:

   <iframe src="somepage.html" onload="iframeLoaded()"></iframe>
   
   <script>
   function iframeLoaded() {
     // Código após o carregamento
     console.log('iframe carregado via atributo onload!');
   }
   </script>
   

3. Verificação do estado document.readyState dentro do iframe (se tiver acesso ao conteúdo do iframe):

   const iframeElement = document.getElementById('myIframe');
   
   iframeElement.onload = function() {
     const iframeDoc = iframeElement.contentDocument || iframeElement.contentWindow.document;
   
     if (iframeDoc.readyState === 'complete') {
       // Código após o carregamento completo do DOM dentro do iframe
       console.log('DOM do iframe carregado completamente!');
     }
   };
   

   Este método é menos confiável para determinar a prontidão de todos os recursos (imagens, scripts) dentro do iframe, sendo o evento load mais adequado.

4. Uso de addEventListener: Forma mais moderna de subscrição ao evento.

   const iframeElement = document.getElementById('myIframe');
   
   iframeElement.addEventListener('load', function() {
     // Código após o carregamento do iframe
     console.log('iframe carregado usando addEventListener!');
   });
   

A escolha do método depende do contexto e preferências, mas o evento load é o mais universal e confiável para determinar o carregamento completo do iframe, incluindo todos os seus recursos.