Accessing JavaScript variable in an iframe, from the parent window on same domain

Question

I am fairly new to JavaScript and I am trying to get value of a variable from an embedded iframe. I have resorted to basic testing to make sure I am getting the method right...

I have tried the common suggestions and everything returns 'undefined'. I want to use the variable in an onclick event.

In the iframe content I have stripped everything and just for testing have this:

<script>
var test = "test";
</script>

in the parent window I have done this:

<iframe src="iframe.html" id="iframe" width="200" height="100"></iframe>

<script>
var myVar = window.frames[0].window.test;
</script>
<a href="#" onclick='alert(myVar)' id="link">Click</a>

I have tried the options suggested here: grab global variable from an embedded iframe

Everything I do returns undefined... am I doing something fundamentally wrong?

Thanks in advance..

Answer 1

You're apparently not waiting for the frame's content to be loaded before accessing myVar. Chances are the <script> element in the frame has not yet been fetched or executed when you do that.

Try delaying the variable assignment until the frame's content is fully loaded:

<iframe src="iframe.html" id="iframe" onload="frameLoaded();" width="200" height="100"></iframe>

<script>
    var myVar;
    function frameLoaded() {
        myVar = window.frames[0].window.test;
    }
</script>

As an aside, since your question is tagged jquery I would suggest you write something like:

<iframe src="iframe.html" id="iframe" width="200" height="100"></iframe>

<script>
    $("#iframe").on("load", function() {
        var myVar = this.window.test;
        $("#link").on("click", function() {
            alert(myVar);
        });
    });
</script>