Declare and initialize global variable in iframe scope using Javascript (same domain)

Question

Several questions have been asked about how to access a global variable in an iframe. I'd like to know how to declare and initialize a global variable in an iframe's scope from the parent. I know I can access the variable from the iframe using document.myGlobalVariable, but I'd like to be able to reference it just by saying myGlobalVariable, without document. in the front.

Here's my HTML:

<html>
    <head>...</head>
    <body>
        ...
        <iframe src="myFrame.html"></iframe>
        <script type="text/javascript">
            var iframe = document.querySelector('iframe');
            var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
            iframeDocument.myGlobalVariable = "Hello";
        </script>
    </body>
</html>

myFrame.html

<html>
    <body>
        ...
        <script type="text/javascript">
            // wait for document to load so parent script can finish running
            $(function() {
                console.log(document.myGlobalVariable); // <-- This works
                console.log(myGlobalVariable); // <-- But this doesn't (and I want this one)
            });
        </script>
    </body>
</html>

Thanks!

Quentin · Accepted Answer · 2016-12-15 12:52:33Z

2

You have 3 problems.

You aren't waiting for the document in the iframe to load before you try to modify its DOM
You aren't waiting for the property to be set before trying to read it
You are setting the property on the document but are trying to read it from the window

So:

<html>
    <head>...</head>
    <body>
        ...
        <iframe src="myFrame.html"></iframe>
        <script type="text/javascript">
            var iframe = document.querySelector('iframe');
            iframe.addEventListener("load", function () { 
                var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
                iframeDocument.myGlobalVariable = "Hello";
            });
        </script>
    </body>
</html>

and

<html>
    <body>
        ...
        <script type="text/javascript">
        setInterval(function () {
            console.log(document.myGlobalVariable);
        }, 1000);
        </script>
    </body>
</html>

answered Dec 15, 2016 at 12:52

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

MegaMatt Over a year ago

Thanks @Quentin. I think I edited my question while you were responding. You'll notice that I was aware that document.myGlobalVariable will work, but how can I have it so it's simply in the global scope (of the window, I guess?), such that I can just reference it by myGlobalVariable without document in the front?

MegaMatt Over a year ago

Also, thanks for pointing out my load order issue. In my real-world code, I'm using jQuery to wait for the document to load before running the iframe's JS. I've added that to my question so it doesn't distract from my actual question.

MegaMatt Over a year ago

Got it. Needed to add it to the window scope instead. Added my answer and will accept it. Upvoted your answer.

MegaMatt · Accepted Answer · 2016-12-15 15:49:59Z

1

Answering my own question:

I was attempting to add the variable to the document scope like this:

iframe.contentDocument.myGlobalVariable = "Hello";

But adding it to the document scope means that, in order to reference the variable from within the JS of the iframe, you must append document. to the front of the variable: document.myGlobalVariable.

But as my question states, I wanted to be able to reference it by just the variable name: myGlobalVariable.

To do that, you simply need to add it to the window scope instead:

iframe.contentWindow.myGlobalVariable = "Hello";

answered Dec 15, 2016 at 15:49

MegaMatt

23.9k39 gold badges116 silver badges161 bronze badges

Collectives™ on Stack Overflow

Declare and initialize global variable in iframe scope using Javascript (same domain)

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related