iframe accessing variables

[gloosemo]

Hey

is it possible to access javascript variables in an iframe src page from the parent page, or vice versa. How do you do this? What about the DOM?

thanks

[desiter]

It is possible but only if the iframed page and its parent are loaded from the same domain... otherwise it's not allowed to access the parent form iframe and vice versa.

But let's assume that domains are the same...


Accessing parents variables (or functions)

1. define some container object in the window namespace, e.g.

   window.sharedVars = {}

2. all the functions or variables you want to share put their references also to the window.exportVars, e.g.

   function hello(){
     alert("Hello iframe!");
   }
   window.sharedVars.sayHello = hello;

3. in the iframed page access the variables as following:

   //call the parent's function
   window.parent.sharedVars.sayHello();
   //set a variable in parents namespace
   window.parent.sharedVars.responseText = "Hello parent!";

Accessing iframed variables (or functions)

1. make sure your iframe has a name attribute (e.g. name="example-frame")
2. then you can access the iframe object by window.frames['example-frame']
3. same as in parent define some container object in the window namespace, e.g.

   window.sharedVars = {}

4. all the functions or variables in your iframe you want to share with parent put their references also to the window.exportVars, e.g.

   function iframedHello(){
     alert("Hello parent!);
   }
   window.sharedVars.sayHello = iframedHello;

5. in the parent page access the variables as following:

   //call the iframed function
   window.frames['iframe-name'].sharedVars.iframedHello();
   //set a variable in the iframe namespace
   window.frames['iframe-name'].sharedVars.responseText = "Hello parent!";

NOTICE: This approach won't work if you open your test page from the file system. It will only work loaded from the server - remote or just form your localhost (e.g. localhost/test.html)