将消息从子级 iframe 发送到父级 iframe答案

【问题标题】：Sending message from child to parent iframe将消息从子级 iframe 发送到父级 iframe
【发布时间】：2017-04-11 15:06:03
【问题描述】：

嗯，我正在尝试做一个简单的任务。从父窗口向 iframe 和从 iframe 向父窗口发送消息。

index.js（父）

window.onload = function() {
  //Get Audio node
  let audio = document.getElementsByTagName('audio')[0];

  //Get iframe node
  let iframe = document.getElementsByTagName('iframe')[0];

  iframe.contentWindow.postMessage('Parent To Child', '*');
  window.addEventListener('message', messagesHandler);
}

function messagesHandler(ev) {
  console.log(ev.data);
}

menu.js

window.onload = function() {
  window.parent.postMessage('Child to parent', '*');
  window.addEventListener('message', messagesHandler);
}

function messagesHandler(ev) {
  console.log(ev.data);
}

我可以将消息从父母发送给孩子，但反之则不行。有什么线索吗？？

【问题讨论】：

标签： javascript html

【解决方案1】：

在 iframe 加载处理程序之后调用您的父加载处理程序。这使得从子框架发送的postMessage 未被处理。

来自MDN docs：

加载事件在文档加载过程结束时触发。在此时，文档中的所有对象都在 DOM 中，并且所有图片、脚本、链接和子框架已完成加载。

您需要在确定侦听器已注册时执行postMessages。虽然您知道子侦听器将在父加载事件之前可用，但以通用方式实现而不依赖于此顺序仍然是一个好习惯，这样您就可以使用相同的框架代码，无论您是否在父框架或子框架。

另一个建议是不要对窗口加载事件执行任何操作，因为它在某些情况下可能无法触发。更好的选择是DOMContentLoaded。

【讨论】：

【解决方案2】：

<!DOCTYPE html>
<html>
  <body>
    <div id="test"></div>

    <script>
        window.onmessage = function(e){
            if (e.data == '001:hello') alert('Hello from iframe');
        };

        var insideIframe = function() {
            window.onload = function() {
                console.log('onLoad');
            };
            window.callPapa = function() {
                window.top.postMessage('001:hello', '*');
            };
            window.onmessage = function(e) {
                if (e.data == "hello") { 
                    document.body.innerHTML += "<div>Hello from parent</div>" 
                }
            };
        }

        var fnToStr = insideIframe.toString().replace(/\s+/g, ' ');
        var FnBody = fnToStr.substring(fnToStr.indexOf("{") + 1, fnToStr.lastIndexOf("}"));

        // Test
        var mediaData = '<html><body><div><button onclick="callPapa()">Click me</button></div>';
        mediaData += '<script>' + FnBody + '<\/script></body></html>';

        var iframe = document.createElement('iframe');
        iframe.setAttribute('marginwidth','0');
        iframe.setAttribute('marginheight','0');
        iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(mediaData);

        // PASTE THE IFRAME INSIDE WHATEVER RANDOM DIV
        document.body.appendChild(iframe);
    </script>

  </body>
</html>

【讨论】：