我正在尝试使用window.postMessage API将子文档(iframe)中的简单消息发送回其直接父级。
在父文件中,我有以下内容:
window.addEventListener("message", receiveMessage, true);
var receiveMessage = function(event) {
console.log("Recieved event " + JSON.stringify(event));
}
然后,在iframe中我有以下内容:
window.parent.postMessage('message', '*');
根据我读过的所有内容,这应该可行,我的日志消息应该写入控制台。除非它不起作用。
我知道使用*作为targetOrigin并不总是安全的,但此时我只想理清这种联系。
我缺少哪些想法或任何明显的想法?
答案 0 :(得分:0)
确保在将回调函数{em}传递到receiveMessage()
方法之前声明回调函数addEventListener
。
这是您修改过的父脚本:
var receiveMessage = function(event) {
console.log("Recieved event " + JSON.stringify(event));
}
window.addEventListener("message", receiveMessage, true);
答案 1 :(得分:0)
我遇到了完全相同的问题,并通过将iscript声明上方的“脚本”部分移开来解决了该问题。这是父网站的最终代码:
<script>
window.addEventListener('message', e => {
console.log(e.data);
if (e.origin == "http://localhost:8080"
&& e.data == "CallFunctionA") {
FunctionA();
}
}, false);
function FunctionA() {
window.alert('FunctionA called')
}
</script>
<html>
<body>
<h1>Hello static web site !!!!</h1>
<iframe name="ifu-frame" src="http://localhost:8080/index.html" />
</body>
</html>
iframe的内容很简单:
<button onclick="window.parent.postMessage('CallFunctionA', 'http://localhost:8081')">Call function A</button>
如果我将“脚本”部分放在文档的底部,那么它将不再起作用...