HTML5-跨浏览器iframe postMessage-子级到父级？

Question 1

我一直在关注本教程-http : //www.youtube.com/watch?v= R2hOvZ7bwXU，该教程说明了如何使用postMessage在iframe和父级之间安全地传递消息-您基本上得到了这样的内容-http ：//html5demos.com/postmessage2

我的问题是我需要它以相反的方式工作（子级到父级），并且不知道如何定位父级窗口。

这是我的接收方代码（在父级中）：

function handleMsg(e) {
    if(e.origin == "http://uc.dialogue.net") {
        let blah = e.data;
        alert(blah);    
    } else {
        alert("error");
    }
}
addEventListener("message", handleMsg, true);

这是由简单形式（在子级中）触发的发送方函数：

   let text = document.querySelector('.srchInput').value;
   window.parent.postMessage(text, "http://uc.dialogue.net");

我应该以其他方式定位父母吗？

干杯保罗

Question 2

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) {
    var key = e.message ? "message" : "data";
    var data = e[key];
    //run function//
},false);

可以与父页面中的上述内容以及子页面中的以下内容一起使用-

parent.postMessage("loadMyOrders","*");  //  `*` on any domain

从此处复制代码。

Question 3

使用较新的ecma262规范解压缩可接受的答案，并放弃ie8支持：

window.addEventListener('message', e => {
    const key = e.message ? 'message' : 'data';
    const data = e[key];

    // ...
},false);

相关文件：

Question 4

这是基于Avindra Goolcharan的答案的React版本：

const MessageHandler = ({ allowedUrl, handleMessage }) => {
  useEffect(() => {
    const handleEvent = event => {
      const { message, data, origin } = event;
      if (origin === allowedUrl) {
        handleMessage(message || data);
      }
    };

    window.addEventListener('message', handleEvent, false);
    return function cleanup() {
      window.removeEventListener('message', handleEvent);
    };
  });

  return <React.Fragment />;
};

在allowedUrl中加载的URL在哪里，iframe并且handleMessage是与Redux连接的功能（或其他形式的状态管理），可让应用的其余部分知道收到的消息。