Question

我一直在关注本教程 - http://www.youtube.com/watch?v=R2hOvZ7bwXU，它基本上解释了如何使用postmessage在iframe和父级之间安全地传递消息 - 你最终会得到类似这样的内容 - http://html5demos.com/postmessage2

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

这是我的接收者代码（在父母中） -

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

这是由简单表单（在子级中） -

触发的发送方函数

   var text=$('.srchInput').val();
   window.parent.postMessage(text, "http://uc.dialogue.net");

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

干杯保罗

Answer 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复制的代码。

Answer 2

接受答案的现代简化版本（删除了遗留的ie8支持，并使代码更具可读性）：

window.addEventListener('message',function(e) {
    var key = e.message ? 'message' : 'data';
    var data = e[key];
    //run function//
},false);

请参阅：

Answer 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连接的功能（或其他形式的状态管理），可让其他应用知道接收到的内容。消息。

Html5 - 跨浏览器iframe postmessage - 孩子到父母？

3 个答案: