Jak sprawdzić, czy iframe się załadował?

Istnieje kilka sposobów:

1. Przez zdarzenie load: Najbardziej powszechny i niezawodny sposób.

   const iframeElement = document.getElementById('myIframe');
   
   iframeElement.onload = function() {
     // Kod wykonywany po załadowaniu iframe
     console.log('iframe załadowany!');
   };
   

2. Przez atrybut onload w HTML:

   <iframe src="somepage.html" onload="iframeLoaded()"></iframe>
   
   <script>
   function iframeLoaded() {
     // Kod po załadowaniu
     console.log('iframe załadowany przez atrybut onload!');
   }
   </script>
   

3. Sprawdzanie stanu document.readyState wewnątrz iframe (jeśli masz dostęp do zawartości iframe):

   const iframeElement = document.getElementById('myIframe');
   
   iframeElement.onload = function() {
     const iframeDoc = iframeElement.contentDocument || iframeElement.contentWindow.document;
   
     if (iframeDoc.readyState === 'complete') {
       // Kod po pełnym załadowaniu DOM wewnątrz iframe
       console.log('DOM iframe załadowany w pełni!');
     }
   };
   

   Ta metoda jest mniej niezawodna w określaniu gotowości wszystkich zasobów (obrazów, skryptów) wewnątrz iframe, zdarzenie load jest do tego bardziej odpowiednie.

4. Użycie addEventListener: Bardziej nowoczesny sposób subskrypcji na zdarzenie.

   const iframeElement = document.getElementById('myIframe');
   
   iframeElement.addEventListener('load', function() {
     // Kod po załadowaniu iframe
     console.log('iframe załadowany za pomocą addEventListener!');
   });
   

Wybór metody zależy od kontekstu i preferencji, ale zdarzenie load jest najbardziej uniwersalne i niezawodne do określenia pełnego załadowania iframe, w tym wszystkich jego zasobów.