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.