Sharing global javascript variable of a page with an iframe within that page

I have an scenario where in I have a page, which have <script> tag and some global javascript variables within that. I also have an iframe within that page and I want to have access of global javascript variables of the page in iframe.

Is it possible?, if yes, how can i do that?

Solution 1:

Easily by calling parent.your_var_name in your iframe's script.

One condition: both pages (main and iframe's) have to be on the same domain.

main page:

<script>
 var my_var = 'hello world!';
</script>

iframe

<script>
  function some_fn(){
    alert(parent.my_var); //helo world!
  }
</script>

Solution 2:

Not possible if the iframe and the main document are not in the same domain (due to cross domain security policy).

To bypass this limitation you can use cross domain messaging.

Possible if iframe an main document are in the same domain, you can access their global variables. There are object which belongs to the window object of the iframe or the main page.

Here is the code to access the iframe variable myvar from the main document (or an iframe) in a same domain :

document.getElementById('iframeid').contentWindow['myvar'];