Saltar al contenido

Detectar DOMContentLoaded en iframe

Solución:

En el proceso de responder a esta pregunta, descubrí la razón por la que tu DOMContentLoaded el detector de eventos no funciona. Me parece que tienes dos problemas.

Primero, estás tratando de escuchar DOMContentLoaded evento en el propio iFrame. Eso no es un evento iFrame. Es un evento de documento. Por lo tanto, debe acceder al iFrame para obtener la ventana de contenido y luego obtener el documento de allí. Eso lleva al segundo problema.

En segundo lugar, cuando se crea un iFrame por primera vez, tiene una variable ficticia document en él que NO es el mismo documento que eventualmente estará allí cuando el contenido dinámico se cargue a través del .src atributo. Entonces, incluso si lo hicieras:

this.els.stage_ifr.contentWindow.document

para obtener el documento en el iFrame, no será necesariamente el documento correcto y, por lo tanto, el DOMContentLoaded el evento no se activará (he visto este comportamiento en Chrome).


MDN dice que uno puede escuchar DOMFrameContentLoaded en el propio iFrame y esto se corresponderá con el momento en que el documento subyacente se DOMContentLoaded. Desafortunadamente, no puedo hacer que este evento funcione en ningún navegador. Entonces, en este momento, la única solución que conozco es activar el evento de carga desde el propio iFrame, donde puede escuchar su propio DOMContentLoaded evento (puede llamar a la ventana principal si es necesario) o simplemente escuchar el load en el objeto iFrame y sepa que no se activará hasta que también se carguen recursos como hojas de estilo e imágenes en el iFrame.


De todos modos, pensé en explicar algo de lo que estaba sucediendo con su código inicial y ofrecer otra solución a pesar de que esta pregunta se publicó hace más de un año (aunque nunca se respondió).


Actualizar:

He desarrollado un método de seguimiento DOMContentLoaded para un iFrame cargado con el mismo origen que su padre. Puedes ver el código aquí.

Después de probar diferentes opciones, descubrí que el siguiente código funciona para mí:

var iframe = document.getElementById("app-frame-id");
iframe.contentWindow.addEventListener("DOMContentLoaded", onFrameDOMContentLoaded, true);
function onFrameDOMContentLoaded () { 
     console.log("DOMContentLoaded");
};

Si su página y el iframe están en el mismo dominio tienes que esperar a que se active la página original DOMContentLoaded primero, luego adjunte un DOMContentLoaded detector de eventos en el iframe Window (no Document).

Dado que tiene un iframe de la siguiente manera,

<iframe id="iframe-id" name="iframe-name" src="https://foroayuda.es/..."></iframe>

el siguiente fragmento le permitirá conectarse al iframe DOMContentLoaded evento:

document.addEventListener('DOMContentLoaded', function () {
    var iframeWindow = frames['iframe-name'];
    // var iframeWindow = document.querySelector('#iframe-id').contentWindow
    // var iframeWindow = document.getElementById('iframe-id').contentWindow

    iframeWindow.addEventListener('DOMContentLoaded', function () {
        console.log('iframe DOM is loaded!');
    });
});
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *