发送消息从孩子到家长iframe

嗯，我正在尝试做一个简单的任务。从父窗口发送消息给iframe，从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); 
}

我能够从父母将消息发送到孩子，但不是周围的其他方式。任何线索？

来源

2017-04-11 Goamaral

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

从MDN docs：

在原稿载置过程结束

负载事件触发。在这一点上，文档中的所有对象都在DOM中，并且所有的图片，脚本，链接和子帧都已经完成加载。

你需要在postMessage之前确定听众已经注册。虽然你知道子监听器在父加载事件之前是可用的，但仍然是以通用方式实现而不依赖于此顺序的好实践，以便您可以使用相同的框架代码，而不管您是否在父母或孩子的框架。

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

来源

2017-04-11 15:31:18

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

来源

2017-04-11 15:15:44 ayxos

发送消息从孩子到家长iframe

回答

相关问题