Hoe weet je of de iframe is geladen?

Er zijn verschillende manieren:

1. Via het load-evenement: De meest gebruikte en betrouwbare manier.

   const iframeElement = document.getElementById('myIframe');
   
   iframeElement.onload = function() {
     // Code die wordt uitgevoerd na het laden van de iframe
     console.log('iframe geladen!');
   };
   

2. Via het onload-attribuut in HTML:

   <iframe src="somepage.html" onload="iframeLoaded()"></iframe>
   
   <script>
   function iframeLoaded() {
     // Code na het laden
     console.log('iframe geladen via onload-atribuut!');
   }
   </script>
   

3. Controle van de document.readyState-status binnen de iframe (als je toegang hebt tot de inhoud van de iframe):

   const iframeElement = document.getElementById('myIframe');
   
   iframeElement.onload = function() {
     const iframeDoc = iframeElement.contentDocument || iframeElement.contentWindow.document;
   
     if (iframeDoc.readyState === 'complete') {
       // Code na volledige laden van de DOM binnen de iframe
       console.log('DOM van de iframe volledig geladen!');
     }
   };
   

   Deze methode is minder betrouwbaar om te bepalen of alle resources (afbeeldingen, scripts) binnen de iframe geladen zijn; het load-evenement is hiervoor geschikter.

4. Gebruik van addEventListener: Een modernere manier om op het evenement te abonneren.

   const iframeElement = document.getElementById('myIframe');
   
   iframeElement.addEventListener('load', function() {
     // Code na het laden van de iframe
     console.log('iframe geladen met addEventListener!');
   });
   

De keuze van de methode hangt af van de context en voorkeuren, maar het load-evenement is het meest universeel en betrouwbaar om de volledige lading van de iframe te bepalen, inclusief alle resources.