[FIXED] How to access iframe window variables from parent window?

Issue

I'm trying to build a wrapper around an iframe that needs to consume some of the content from within the iframe.

The iframe script assigns some variables to the iframe window like so:

(function() {
   window.courseData = "course data goes here..."
})(window);

And then the parent window is accessing the iframe window:

document.addEventListener('DOMContentLoaded', () => {  
    const iframeWindow = document.getElementById("iframe").contentWindow;
    console.log(iframeWindow); // Window about:blank > courseData {...}
})

When I view the console log in the browser it shows me the iframe window object with all its properties, including the courseData object. However, when I try and access courseData directly it returns undefined...

console.log(iframeWindow.courseData); // undefined

I can't for the life of my figure out why I can see it, but not access it. Any thoughts would be greatly appreciated!

Note: Unfortunately I'm unable to change the content of the iframe, so I can't use other methods of passing data up to the parent.

Another Note: The iframe is coming from the same directory on the server, so there aren't any cross origin issues at play.

Solution

So after some more trial and error I've figured it out myself!

For anyone who's interested the issue is that the iframe window hadn't fully loaded by the time my parent function was called, so the variable returned undefined.

The work around was to use a function to check for when the iframe has finished loading before calling the function, for which I found some helpful code on another stack overflow post here:

How to check if iframe is loaded or it has a content?

Answered By - Cam Parry

Answer Checked By - Katrina (PHPFixing Volunteer)