HTML5-跨浏览器 iframe postMessage-child to father？

我一直在遵循这个教程-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);

这是由一个简单的表单(子表单)触发的 sender 函数:

   let text = document.querySelector('.srchInput').value;
window.parent.postMessage(text, "http://uc.dialogue.net");

我应该用另一种方式瞄准父母吗？

干杯 保罗

117441 次浏览
小开
最佳答案 
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);

Got it to work with the above in the parent page and the following in the child page -    

parent.postMessage("loadMyOrders","*");  //  `*` on any domain

Code copied from here.

小开

Unpacked the accepted answer using newer ecma262 spec, and dropping ie8 support:

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


// ...
},false);

Relevant documentation:

小开

This is a React version based on Avindra Goolcharan's answer:

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 />;
};

Where allowedUrl is the URL loaded within the iframe and handleMessage is a redux-connected function (or other form of state management) letting the rest of the app know about the received message.


提交答案