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

Kev*_*orn 5 javascript iframe jquery html5 postmessage

我正努力postMessage()在iframe和我的主网站之间进行沟通.但是,使用MDN上的示例代码中给出的确切语法,我遇到了一个很好的错误.我尝试了几件事,比如在Javascript中初始化iframe并将其附加到我的页面,但这给我留下了同样的错误.同样有单独的选择器来选择我的iframe.Undefined is not a function

我有以下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>
Run Code Online (Sandbox Code Playgroud)

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

<iframe src="domain here/frameListener.html" class="editor"></iframe>
Run Code Online (Sandbox Code Playgroud)

然后它具有receiveMessage捕获作为对主网页的响应而发送的任何消息的功能.最后但并非最不重要的是,我已经尝试了这个问题中给出的答案:但这并没有解决我的问题.因此,它不是重复的.

如何摆脱此错误消息?

Jiv*_*ngs 5

postMessage不是一个jQuery函数,所以你需要获取实际的windowDOM元素并在其上调用它:

 $('.editor').get(0).contentWindow.postMessage("A", "domain here");
Run Code Online (Sandbox Code Playgroud)

此外,您需要访问该contentWindow属性iframe.以下是MDN文档的摘录:

otherWindow.postMessage(message, targetOrigin, [transfer]);
Run Code Online (Sandbox Code Playgroud)

otherWindow

对另一个窗口的引用; 例如,可以使用iframe元素的contentWindow属性,window.open返回的对象,或window.frames上的命名或数字索引来获取此类引用.