Πώς να καταλάβετε αν το iframe έχει φορτώσει;

Υπάρχουν αρκετοί τρόποι:

1. Μέσω του γεγονότος load: Ο πιο συνηθισμένος και αξιόπιστος τρόπος.

   const iframeElement = document.getElementById('myIframe');
   
   iframeElement.onload = function() {
     // Κώδικας που εκτελείται μετά το φόρτωμα του iframe
     console.log('iframe φορτώθηκε!');
   };
   

2. Μέσω του χαρακτηριστικού onload στο HTML:

   <iframe src="somepage.html" onload="iframeLoaded()"></iframe>
   
   <script>
   function iframeLoaded() {
     // Κώδικας μετά το φόρτωμα
     console.log('iframe φορτώθηκε μέσω του χαρακτηριστικού onload!');
   }
   </script>
   

3. Έλεγχος της κατάστασης document.readyState μέσα στο iframe (αν έχετε πρόσβαση στο περιεχόμενο του iframe):

   const iframeElement = document.getElementById('myIframe');
   
   iframeElement.onload = function() {
     const iframeDoc = iframeElement.contentDocument || iframeElement.contentWindow.document;
   
     if (iframeDoc.readyState === 'complete') {
       // Κώδικας μετά το πλήρες φόρτωμα του DOM μέσα στο iframe
       console.log('Το DOM του iframe φορτώθηκε πλήρως!');
     }
   };
   

   Αυτή η μέθοδος είναι λιγότερο αξιόπιστη για τον προσδιορισμό της ετοιμότητας όλων των πόρων (εικόνες, scripts) μέσα στο iframe, το γεγονός load είναι πιο κατάλληλο.

4. Χρήση του addEventListener: Μοντέρος τρόπος εγγραφής στο γεγονός.

   const iframeElement = document.getElementById('myIframe');
   
   iframeElement.addEventListener('load', function() {
     // Κώδικας μετά το φόρτωμα του iframe
     console.log('iframe φορτώθηκε με χρήση addEventListener!');
   });
   

Η επιλογή της μεθόδου εξαρτάται από το πλαίσιο και τις προτιμήσεις, αλλά το γεγονός load είναι το πιο καθολικό και αξιόπιστο για τον προσδιορισμό της πλήρους φόρτωσης του iframe, συμπεριλαμβανομένων όλων των πόρων του.