javascript - 使用 Javascript 在 iframe 范围内声明并初始化全局变量(同一域)

标签 javascript html iframe scope global-variables

关于如何访问 iframe 中的全局变量提出了几个问题。我想知道如何在父级 iframe 范围内声明并初始化全局变量。我知道我可以使用 document.myGlobalVariable 从 iframe 访问该变量,但我希望能够通过说 myGlobalVariable 来引用它,而不需要 document . 在前面。

这是我的 HTML:

<html>
    <head>...</head>
    <body>
        ...
        <iframe src="myFrame.html"></iframe>
        <script type="text/javascript">
            var iframe = document.querySelector('iframe');
            var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
            iframeDocument.myGlobalVariable = "Hello";
        </script>
    </body>
</html>

myFrame.html

<html>
    <body>
        ...
        <script type="text/javascript">
            // wait for document to load so parent script can finish running
            $(function() {
                console.log(document.myGlobalVariable); // <-- This works
                console.log(myGlobalVariable); // <-- But this doesn't (and I want this one)
            });
        </script>
    </body>
</html>

谢谢!

最佳答案

您有 3 个问题。

  1. 在尝试修改 DOM 之前,您无需等待 iframe 中的文档加载
  2. 在尝试读取属性之前,您不会等待属性设置完毕
  3. 您正在文档上设置属性,但尝试从窗口读取它

所以:

<html>
    <head>...</head>
    <body>
        ...
        <iframe src="myFrame.html"></iframe>
        <script type="text/javascript">
            var iframe = document.querySelector('iframe');
            iframe.addEventListener("load", function () { 
                var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
                iframeDocument.myGlobalVariable = "Hello";
            });
        </script>
    </body>
</html>

<html>
    <body>
        ...
        <script type="text/javascript">
        setInterval(function () {
            console.log(document.myGlobalVariable);
        }, 1000);
        </script>
    </body>
</html>

关于javascript - 使用 Javascript 在 iframe 范围内声明并初始化全局变量(同一域),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41164557/

相关文章:

javascript - For 循环和更新函数在 React 中不起作用

javascript - 将 Ref{Cwstring}() 转换为字符串

html - 转换表格垂直标题

http - 如何允许所有具有 CSP header 的帧祖先?

javascript - 使用YouTube API和IE8进行“视频未定义”

javascript - AngularJS错误 "element.children(...).slideToggle is not a function"

javascript - 水平菜单重叠图像 slider

php - 单击以使用 jquery 将动态行添加到现有记录

javascript - iFrame 中的 SoundCloud 自动播放已停止工作

javascript - 将 jquery datepicker 绑定(bind)到动态行 Textfield