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

我一直在学习本教程-，它解释了如何使用postMessage在iframe和parent之间安全地传递消息-您基本上会得到这样的结果-

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

这是我的接收器代码（在父项中）：

这是由一个简单的表单（在child中）触发的发送方函数：

我应该以另一种方式针对父母吗

干杯 保罗

让它在父页面中处理上述内容，在子页面中处理以下内容-

---

从中复制的代码。

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

window.addEventListener（'message'，e=>{
const key=e.message？'message'：'data'；
常数数据=e[键]；
// ...
}，假）；

相关文件：

---

这是一个基于的React版本：

constmessagehandler=（{allowedUrl，handleMessage}）=>{
useffect（（）=>{
const handleEvent=事件=>{
const{message，data，origin}=事件；
如果（原点===允许URL）{
handleMessage（消息| |数据）；
}
};
window.addEventListener（'message'，handleEvent，false）；
返回函数cleanup（）{
removeEventListener（'message'，handleEvent）；
};
});
返回；
};

---

其中，

allowedUrl

是加载在

iframe

中的URL，

handleMessage

是一个redux连接函数（或其他形式的状态管理），让应用程序的其余部分知道收到的消息。

！请注意，在eventer侦听器中，

e.message==“loadMyOrders”

感谢您的支持。虽然在Chrome中我有

e.data==“loadMyOrders”

。有时你需要使用window.opener.postMessage（）；例如，如果子窗口有一些重定向。只有当代码被逐字逐句地引用而没有至少引用它作为源代码时，才会被否决。对于将来阅读此答案的任何人，请不要包含所有样板文件垃圾，这只是ie需要的

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

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         

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