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

IT技术 javascript html
2021-02-04 06:13:03

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

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

干杯保罗

3个回答
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

从这里复制的代码。

惊人的！请注意，在事件侦听器中，e.message == "loadMyOrders"
2021-03-17 06:13:03
感谢那。虽然在 Chrome 中我有e.data == "loadMyOrders".
2021-04-06 06:13:03
投反对票只是因为该代码是从David Walsh 的博客中逐字取出的，但至少没有将其作为来源引用。
2021-04-09 06:13:03
对于将来阅读此答案的任何人，请不要包含所有样板垃圾，这仅在 ie <= 8 时才需要。只要使用addEventListener直接。caniuse.com/#feat=addeventlistener谢谢:)
2021-04-09 06:13:03
有时你需要使用 window.opener.postMessage(); 例如，如果子窗口有一些重定向。
2021-04-13 06:13:03

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

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

    // ...
},false);

相关文档：

这是基于一个阵营版本Avindra Goolcharan的答案：

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是内装入的URLiframe和handleMessage是一个终极版-连接的功能（或状态管理的其他形式），让应用程序知道的其余部分有关的接收的消息。

其它你可能感兴趣的问题
上一篇Angular4 - 表单控件没有值访问器 下一篇如何找到下标字母的unicode？