window.postMessage无法从iframe工作到父文档

时间:2016-10-02 22:02:55

标签: javascript iframe postmessage

我正在尝试使用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并不总是安全的,但此时我只想理清这种联系。

我缺少哪些想法或任何明显的想法?

2 个答案:

答案 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>

如果我将“脚本”部分放在文档的底部,那么它将不再起作用...