Wie erkennt man, dass iframe geladen wurde?

Es gibt mehrere Möglichkeiten:

1. Über das load-Ereignis: Die gebräuchlichste und zuverlässigste Methode.

   const iframeElement = document.getElementById('myIframe');
   
   iframeElement.onload = function() {
     // Code, der nach dem Laden des iframes ausgeführt wird
     console.log('iframe geladen!');
   };
   

2. Über das onload-Attribut in HTML:

   <iframe src="somepage.html" onload="iframeLoaded()"></iframe>
   
   <script>
   function iframeLoaded() {
     // Code nach dem Laden
     console.log('iframe geladen über das onload-Attribut!');
   }
   </script>
   

3. Überprüfung des document.readyState-Zustands innerhalb des iframes (wenn Zugriff auf den iframe-Inhalt besteht):

   const iframeElement = document.getElementById('myIframe');
   
   iframeElement.onload = function() {
     const iframeDoc = iframeElement.contentDocument || iframeElement.contentWindow.document;
   
     if (iframeDoc.readyState === 'complete') {
       // Code nach vollständigem Laden des DOM im iframe
       console.log('iframe DOM vollständig geladen!');
     }
   };
   

   Diese Methode ist weniger zuverlässig, um die Bereitschaft aller Ressourcen (Bilder, Skripte) im iframe zu bestimmen; das load-Ereignis ist dafür besser geeignet.

4. Verwendung von addEventListener: Eine modernere Methode, um auf das Ereignis zu hören.

   const iframeElement = document.getElementById('myIframe');
   
   iframeElement.addEventListener('load', function() {
     // Code nach dem Laden des iframes
     console.log('iframe geladen mit addEventListener!');
   });
   

Die Wahl der Methode hängt vom Kontext und den Präferenzen ab, aber das load-Ereignis ist am universellsten und zuverlässigsten, um das vollständige Laden des iframes einschließlich aller Ressourcen zu bestimmen.