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

Question

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?

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

Answer 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'];

Answer 3

Great answers above. Just to add, beware of this in ES6:

 <script>
 const my_var2 = 'hello world!';
 let   my_var3 = 'hello world!';
 </script>

If you use the above in the main page, you can not refer to either my_var2 or my_var3 in the iframe(s). You must use 'var' to accomplish that.

This is because "const, let, and class don't create properties on the global object".

SEE: What is the proper to write a global const in javascript es6?