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

【问题标题】：HTML5 - Cross Browser iframe postMessage - child to parent?HTML5 - 跨浏览器 iframe postMessage - 子到父？
【发布时间】：2012-02-08 00:33:54
【问题描述】：

我一直在关注本教程 - 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");

我应该以不同的方式定位父母吗？

干杯保罗

【问题讨论】：

标签： javascript html

【解决方案1】：

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

从here复制的代码。

【讨论】：

太棒了！请注意，在事件监听器中，e.message == "loadMyOrders"
谢谢。虽然在 Chrome 中我有 e.data == "loadMyOrders".
有时需要使用window.opener.postMessage();例如，如果子窗口有一些重定向。
之所以被否决，只是因为代码是从David Walsh's blog 中逐字提取的，至少没有引用它作为来源。
对于将来阅读此答案的任何人，请不要包括所有样板垃圾，这仅适用于 ie addEventListener。 caniuse.com/#feat=addeventlistener 谢谢 :)

【解决方案2】：

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

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

    // ...
},false);

相关文档：

【讨论】：

【解决方案3】：

这是基于Avindra Goolcharan的answer的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 是在 iframe 中加载的 URL，handleMessage 是一个与 redux 连接的函数（或其他形式的状态管理），让应用程序的其余部分知道收到的消息。

【讨论】：