父框架如何访问子框架窗口？答案

【问题标题】：How parent frame access child frame window?父框架如何访问子框架窗口？
【发布时间】：2018-05-14 16:45:10
【问题描述】：

在下面的代码中：

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">    
      </head>
      <body>

        <iframe srcdoc="<script>
                            window.innerStr='xyz';
                        </script>" >
        </iframe>

        <script>

            function test() {
                let iframe = window.frames[0];
                console.log('frames innerStr: ' + iframe.innerStr); // does not work if child frame says innerStr = 'xyz' without window scope
            }
            window.onload = test;  
            test();
        </script>
      </body>
    </html>

对于window.innerStr='xyz';，在子框架中不使用window范围，父框架无法访问子框架属性(innerStr)

对于 JS 编码，窗口范围是强制性的吗？ window.open('file.html') 有类似的结果。

【问题讨论】：

developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/…
iframe.contentWindow || iframe.contentDocument 如果满足同源策略要求。
@zer00ne 他们都没有innerStr 属性。 document.getElementsByTagName('iframe')[0].contentDocument; 。是的，同源
在跨域文档的情况下，<iframe> 不会让您访问它的框架window 对象。所以在这种情况下，唯一的方法是使用postMessage，正如我所说，它将复制正在传输的数据（即不适用于 DOM Element 等复杂对象，并且在一帧中对这些对象所做的更改获胜'不要反映在另一个）
No 同域，Window 对象window.open 返回类似于ìframe.contentWindow` 一样，在相同的条件下会泄露相同的细节。

标签： javascript iframe ecmascript-5

【解决方案1】：

您可以使用消息从父级与 iframe 对话。

将此代码放在父级中

// Create IE + others compatible event handler
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

// Listen to message from child window
eventer(messageEvent,function(e) {
    // e.data = "foo"
    doStuff(e.data);
},false);

function doStuff(data){
    console.log(data);
}

将此代码放入 iframe 中

var someVarible = "foo"
parent.postMessage(someVarible, "https://urlofsite.com");

编辑让它与你已有的代码一起工作。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
</head>
<body>

<iframe srcdoc="<script>let innerStr='xyz';window.parent.test(innerStr);</script>">
</iframe>

<script>

    function test(foo) {
        var iframe = window.frames[0];
        console.log('frames innerStr: ' + foo)
    }
</script>
</body>
</html>

【讨论】：

1) 相同的逻辑是否适用于window.open('local url')？从旧窗口访问新窗口的窗口范围？ 2) 为什么子文档可以使用window.parent与父文档对话，而父文档却不能与子文档对话？
是的，您可以使用 window.open('url')。如果你想与 iframe 对话，你可以使用 var foo = window.open('url');然后使用 foo.postMessage("bar")。你可以在这里阅读更多关于它的信息developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
我不能使用全局符号注册表吗？而不是发布消息？
我对 Symbol() 的了解不够多，无法在阅读后给您适当的回复，我已经编辑了答案以使其与您当前的代码一起使用
糟糕...您正在从子框架向父框架发送消息？ parent.postMessage