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..

Your JS code is probably running before the iFrame has finished loading. — gen_Eric
– gen_Eric, Commented Jan 16, 2013 at 20:14

Bergi · Accepted Answer · 2013-01-16 20:14:56Z

You are already executing the script when the <iframe> is still loading, so it's test is undefined. Either wait for the iframe's load event, or just get the variable when clicking:

<iframe src="iframe.html" id="iframe" width="200" height="100"></iframe> <script> var myFrame = window.frames[0].window; </script> <a href="#" onclick='alert(myFrame.test)' id="link">Click</a>

Frédéric Hamidi · Accepted Answer · 2013-01-16 20:30:01Z

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>

Neither of those work. With the plain JavaScript I get an error in firebug that says myVar is not defined and so the onclick event doesnt occur. With the jQuery option, firebug tells me that this.window.test is undefined.
@Faldinio, indeed, that's because myVar is local in my answer. I did not understand you wanted to put it in global scope. Answer updated accordingly.
To be honest I should have spotted that it was defined in the function rather than outside it, but I've been staring at the same code for far too long! It does work with the updated answer.

fkabeer · Accepted Answer · 2013-01-16 20:24:54Z

try to use this

 <iframe src="iframe.html" id="iframe" onload="loader()" width="200" height="100"> </iframe> <script> var myVar function loader(){ myVar = window.frames[0].window.test; } </script> <a href="#" onclick='alert(myVar)' id="link">Click</a>

emmmdeee · Accepted Answer · 2013-05-14 20:48:37Z

In the aside solution I just wanted to point out that when you use the jquery onload event handler function and you want to access the jquery "this" object you have to use the $(this.attr) notation.

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

3 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

Comments

Comments

Linked

Related