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

Posted 2023-03-05

【中文标题】HTML5 - 跨浏览器 iframe postMessage - 子到父？

【英文标题】：HTML5 - Cross Browser iframe postMessage - child to parent?

【发布时间】：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");   

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

干杯 保罗

【参考方案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);

相关文档：

http://caniuse.com/#feat=addeventlistener https://developer.mozilla.org/en-US/docs/Web/API/Window/message_event#Examples

【参考方案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 连接的函数（或其他形式的状态管理），让应用程序的其余部分知道收到的消息。