Comment savoir si l'iframe a chargé?

Il existe plusieurs méthodes :

1. Via l'événement load : La méthode la plus courante et fiable.

   const iframeElement = document.getElementById('myIframe');
   
   iframeElement.onload = function() {
     // Code exécuté après le chargement de l'iframe
     console.log('iframe chargé !');
   };
   

2. Via l'attribut onload en HTML :

   <iframe src="somepage.html" onload="iframeLoaded()"></iframe>
   
   <script>
   function iframeLoaded() {
     // Code après le chargement
     console.log('iframe chargé via l’attribut onload !');
   }
   </script>
   

3. Vérification de l’état document.readyState à l’intérieur de l’iframe (si vous avez accès au contenu de l’iframe) :

   const iframeElement = document.getElementById('myIframe');
   
   iframeElement.onload = function() {
     const iframeDoc = iframeElement.contentDocument || iframeElement.contentWindow.document;
   
     if (iframeDoc.readyState === 'complete') {
       // Code après le chargement complet du DOM dans l’iframe
       console.log('DOM de l’iframe chargé complètement !');
     }
   };
   

   Cette méthode est moins fiable pour déterminer si toutes les ressources (images, scripts) à l’intérieur de l’iframe sont chargées, l’événement load étant plus approprié.

4. Utilisation de addEventListener : Méthode plus moderne pour s’abonner à l’événement.

   const iframeElement = document.getElementById('myIframe');
   
   iframeElement.addEventListener('load', function() {
     // Code après le chargement de l’iframe
     console.log('iframe chargé avec addEventListener !');
   });
   

Le choix de la méthode dépend du contexte et des préférences, mais l’événement load est le plus universel et fiable pour déterminer le chargement complet de l’iframe, y compris toutes ses ressources.