在该页面内使用iframe共享页面的全局javascript变量

Question

我有一个场景,我有一个页面,其中有<script>标签和一些全局javascript变量.我在该页面中也有一个iframe,我想在iframe中访问该页面的全局javascript变量.

有可能吗？如果是的话,我该怎么做？

Answer 1

通过在iframe的脚本中调用parent.your_var_name轻松实现.

一个条件:两个页面(主页面和iframe)必须位于同一个域中.

主页:

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

IFRAME

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

Answer 2

如果 iframe和主文档不在同一个域中(由于跨域安全策略),则不可能.

要绕过此限制,您可以使用跨域消息传递.

如果 iframe主文档在同一个域中,则可以访问它们的全局变量.有对象属于iframe的窗口对象或主页面.

以下是从同一域中的主文档(或iframe) 访问iframe变量myvar的代码 :

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

Answer 3

上面的好答案。只需添加一下，请注意在ES6中：

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

如果您在首页中使用以上内容，则无法在iframe中引用my_var2或my_var3。您必须使用“ var”来完成。

这是因为“ const，let和class不会在全局对象上创建属性”。

请参阅：在javascript es6中编写全局const的合适方法是什么？