¿Cómo saber si el iframe ha cargado?

Existen varias formas:

1. A través del evento load: La forma más común y confiable.

   const iframeElement = document.getElementById('myIframe');
   
   iframeElement.onload = function() {
     // Código que se ejecuta después de cargar el iframe
     console.log('¡iframe cargado!');
   };
   

2. A través del atributo onload en HTML:

   <iframe src="somepage.html" onload="iframeLoaded()"></iframe>
   
   <script>
   function iframeLoaded() {
     // Código después de cargar
     console.log('¡iframe cargado a través del atributo onload!');
   }
   </script>
   

3. Verificación del estado document.readyState dentro del iframe (si tienes acceso al contenido del iframe):

   const iframeElement = document.getElementById('myIframe');
   
   iframeElement.onload = function() {
     const iframeDoc = iframeElement.contentDocument || iframeElement.contentWindow.document;
   
     if (iframeDoc.readyState === 'complete') {
       // Código después de la carga completa del DOM dentro del iframe
       console.log('¡DOM del iframe cargado completamente!');
     }
   };
   

   Este método es menos confiable para determinar la preparación de todos los recursos (imágenes, scripts) dentro del iframe, el evento load es más adecuado para esto.

4. Uso de addEventListener: Forma más moderna de suscribirse al evento.

   const iframeElement = document.getElementById('myIframe');
   
   iframeElement.addEventListener('load', function() {
     // Código después de cargar el iframe
     console.log('¡iframe cargado usando addEventListener!');
   });
   

La elección del método depende del contexto y las preferencias, pero el evento load es el más universal y confiable para determinar la carga completa del iframe, incluidos todos sus recursos.