Estoy tratando de construir un contenedor alrededor de un iframe que necesita consumir parte del contenido dentro del iframe.
El script de iframe asigna algunas variables a la ventana de iframe de la siguiente manera:
(function() { window.courseData = "course data goes here..." })(window);Y luego la ventana principal está accediendo a la ventana iframe:
document.addEventListener('DOMContentLoaded', () => { const iframeWindow = document.getElementById("iframe").contentWindow; console.log(iframeWindow); // Window about:blank > courseData {...} })Cuando veo el registro de la consola en el navegador, me muestra el objeto de la ventana iframe con todas sus propiedades, incluido el objeto CourseData. Sin embargo, cuando trato de acceder a los datos del curso directamente, devuelve undefined...
console.log(iframeWindow.courseData); // undefinedNo puedo por mi vida averiguar por qué puedo verlo, pero no acceder a él. ¡Cualquier pensamiento sería muy apreciado!
Nota: Lamentablemente, no puedo cambiar el contenido del iframe, por lo que no puedo usar otros métodos para pasar datos al padre.
Otra nota: el iframe proviene del mismo directorio en el servidor, por lo que no hay problemas de origen cruzado en juego.
Así que después de un poco más de prueba y error, ¡lo descubrí yo mismo!
Para cualquiera que esté interesado, el problema es que la ventana iframe no se había cargado por completo cuando se llamó a mi función principal, por lo que la variable devolvió indefinida.
La solución fue usar una función para verificar cuándo el iframe terminó de cargarse antes de llamar a la función, para lo cual encontré un código útil en otra publicación de desbordamiento de pila aquí:
¿Cómo verificar si el iframe está cargado o tiene contenido?