我一直在关注这个教程- 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");
我应该以不同的方式瞄准父母吗?
干杯保罗
发布于 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复制的代码。
发布于 2020-08-07 23:43:04
这是一个基于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连接函数(或其他形式的状态管理),让应用程序的其余部分知道收到的消息。
https://stackoverflow.com/questions/8822907
复制相似问题