Come sapere se l'iframe si è caricato?

Esistono diversi metodi:

1. Attraverso l'evento load: Il metodo più comune e affidabile.

   const iframeElement = document.getElementById('myIframe');
   
   iframeElement.onload = function() {
     // Codice eseguito dopo il caricamento dell'iframe
     console.log('iframe caricato!');
   };
   

2. Attraverso l'attributo onload in HTML:

   <iframe src="somepage.html" onload="iframeLoaded()"></iframe>
   
   <script>
   function iframeLoaded() {
     // Codice dopo il caricamento
     console.log('iframe caricato tramite attributo onload!');
   }
   </script>
   

3. Verifica dello stato document.readyState all’interno dell’iframe (se si ha accesso al contenuto dell’iframe):

   const iframeElement = document.getElementById('myIframe');
   
   iframeElement.onload = function() {
     const iframeDoc = iframeElement.contentDocument || iframeElement.contentWindow.document;
   
     if (iframeDoc.readyState === 'complete') {
       // Codice dopo il caricamento completo del DOM all’interno dell’iframe
       console.log('DOM dell’iframe completamente caricato!');
     }
   };
   

   Questo metodo è meno affidabile per determinare la prontezza di tutte le risorse (immagini, script) all’interno dell’iframe, l’evento load è più adatto.

4. Utilizzo di addEventListener: Metodo più moderno di sottoscrizione all’evento.

   const iframeElement = document.getElementById('myIframe');
   
   iframeElement.addEventListener('load', function() {
     // Codice dopo il caricamento dell’iframe
     console.log('iframe caricato con addEventListener!');
   });
   

La scelta del metodo dipende dal contesto e dalle preferenze, ma l’evento load è il più universale e affidabile per determinare il caricamento completo dell’iframe, comprese tutte le sue risorse.