首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >HTML5 -跨浏览器iframe postMessage -子到父?

HTML5 -跨浏览器iframe postMessage -子到父?
EN

Stack Overflow用户
提问于 2012-01-12 00:30:36
回答 2查看 97.5K关注 0票数 78

我一直在关注这个教程- http://www.youtube.com/watch?v=R2hOvZ7bwXU,它解释了如何使用postMessage在iframe和parent之间安全地传递消息-你基本上会得到这样的结果- 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");   

我应该以不同的方式瞄准父母吗?

干杯保罗

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2012-01-13 19:24:20

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

票数 121
EN

Stack Overflow用户

发布于 2020-08-07 23:43:04

这是一个基于Avindra Goolcharananswer的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连接函数(或其他形式的状态管理),让应用程序的其余部分知道收到的消息。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/8822907

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档