postMessage()生成错误“undefined is not a function”

时间:2015-01-29 09:42:58

标签: javascript jquery html5 iframe postmessage

我试图让postMessage()在iframe和我的主网站之间进行通信。但是,使用example code MDN上提供的确切语法,我会收到一个很好的Undefined is not a function错误。我尝试了几件事,例如在Javascript中初始化iframe并将其附加到我的页面,但这给我留下了同样的错误。同样有单独的选择器来选择我的iframe。

我有以下Javascript代码:

<script type="text/javascript">
    $(document).ready(function() {
        $('.editor').postMessage("A", "domain here");
    });

    function receiveMessage(event)
    {
        if (event.origin !== "domain here")
            return;

        // Do something
    }

    window.addEventListener("message", receiveMessage, false);
</script>

上面的脚本尝试向页面上的iframe发送消息,如下所示:

<iframe src="domain here/frameListener.html" class="editor"></iframe>

然后它有一个函数receiveMessage来捕获作为对主网页的响应发送的任何消息。最后但同样重要的是,我已经尝试了this question中给出的答案:但这并没有解决我的问题。因此,它不是重复的。

如何摆脱此错误消息?

1 个答案:

答案 0 :(得分:5)

postMessage不是jQuery函数,因此您需要获取实际的window DOM元素并在其上调用它:

 $('.editor').get(0).contentWindow.postMessage("A", "domain here");

此外,您需要访问contentWindow的{​​{1}}属性。以下是MDN文档的摘录:

iframe
     

otherWindow.postMessage(message, targetOrigin, [transfer]);

     

对另一个窗口的引用;这样的参考可能是   例如,使用iframe的contentWindow属性获得   元素,window.open返回的对象,或者命名或数字   window.frames上的索引。