Question

好吧，我正在尝试做一个简单的任务。将消息从父窗口发送到iframe，从iframe发送到父窗口。

index.js（parent）

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);
}

我能够将消息从父母发送到孩子而不是相反。任何线索??

Answer 1

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

来自MDN docs：

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

您需要在确定侦听器已经注册的情况下执行postMessage。虽然您知道子侦听器在父加载事件之前可用，但仍然是以通用方式实现而不依赖于此顺序的良好实践，因此您可以使用相同的框架代码，无论您是否在父母或子女框架。

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

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

从子节点发送消息到父iframe

2 个答案: