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!');
});
});