【问题标题】:Failed to execute 'postMessage' on 'DOMWindow': The target origin provided does not match the recipient window's origin ('null')无法在“DOMWindow”上执行“postMessage”:提供的目标原点与接收窗口的原点不匹配(“null”)
【发布时间】:2014-04-07 07:31:34
【问题描述】:

我在 heroku 中有一个游戏,现在我正试图让它在 Facebook 画布中运行,但是,虽然它在 Firefox 中运行,但在 Chrome 和 IE 中却不行。

IE显示一个带有按钮的警告,当点击按钮时,它会显示内容。

在 chrome 中,我收到此错误:

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://game.herokuapp.com') does not match the recipient window's origin ('null').

怎么了?

【问题讨论】:

    标签: javascript facebook heroku


    【解决方案1】:

    确保您(或 Facebook)向其发布消息的目标窗口已完成加载。我收到此错误的大多数情况是我发送消息的 iframe 加载失败。

    【讨论】:

    • “您/FB 正在发布消息的目标窗口已加载”我是网络开发新手。这是什么意思?
    • @PrakharMohanSrivastava 好问题——语法使这个答案难以理解。
    • 我认为他是说发布到文档尚未完成加载(尚未)的窗口会导致此错误。
    • 听起来 Facebook 的“开箱即用”代码不起作用。如何确保目标窗口已加载?
    【解决方案2】:

    发生这种情况的另一个原因是,如果您使用的 iframe 具有沙盒属性并且未设置 allow-same-origin,例如:

    // page.html
    <iframe id="f" src="http://localhost:8000/iframe.html" sandbox="allow-scripts"></iframe>
    <script type="text/javascript">
        var f = document.getElementById("f").contentWindow;
        // will throw exception
        f.postMessage("hello world!", 'http://localhost:8000');
    </script>
    
    // iframe.html
    <script type="text/javascript">
        window.addEventListener("message", function(event) {
            console.log(event);
        }, false);
    </script>
    

    我没有找到其他解决方案:

    • 将 allow-same-origin 添加到沙箱(不想这样做)
    • 使用f.postMessage("hello world!", '*');

    【讨论】:

    • 但是同时使用 allow-scripts 和 allow-same-origin 是不安全的(Firefox 说:“警告:同时使用 allow-scripts 和 allow-same-origin 会使 iframe 沙箱属性无效。”)。与this question 相关。所以我认为建议使用星号,因为您不允许更改 URL。
    • 另一方面,我尝试从 iframe 中 window.postMessage,conlsoe 中的错误消息显示域必须匹配,与 window.parent.postMessage,它仍然抱怨相同的错误消息。 window.parent.location.origin 也被拒绝访问。然后我尝试'*' 作为原点,它可以工作。结果主机 localhost127.0.0.1 不匹配。
    【解决方案3】:

    要检查框架是否已加载,请使用 onload 函数。或者把你的main函数放在load中:我推荐在js创建iframe的时候使用load

     $('<iframe />', {
       src: url,
       id:  'receiver',
       frameborder: 1,
       load:function(){
         //put your code here, so that those code can be make sure to be run after the frame loaded
       }
       }).appendTo('body');
    

    【讨论】:

      【解决方案4】:

      就我而言,我没有添加 http:// 前缀。可能值得检查。

      【讨论】:

        【解决方案5】:

        在我的情况下,SSL 证书对 iframe 域无效,因此请确保您尝试向其发送消息的 iframe URL 打开没有任何问题(以防您通过 https 加载 iframe)。

        【讨论】:

          【解决方案6】:

          相关说明:从 iframe 向主机页面发送消息时,如果您忘记使用 window.top.postMessage,则会收到此错误。

          如果没有 .top,您将消息发送到 iframe 内的 iframe。

          【讨论】:

            【解决方案7】:

            我的问题是我从一开始就完全启动播放器,但我使用的是 iframe 而不是包装器 div。

            【讨论】:

              【解决方案8】:

              如果您尝试创建一个没有 videoId 的播放器,也会发生这种情况。好像不支持。

              【讨论】:

                【解决方案9】:

                我尝试在父页面和嵌入式 iframe 之间进行跨域消息传递。使用
                window.postMessage('text', '*'); 失败 - iframe 端从未收到消息。

                改成这个就可以了:
                document.querySelector('iframe').contentWindow.postMessage('text', '*');

                【讨论】:

                  猜你喜欢
                  • 2019-12-09
                  • 2019-12-30
                  • 2019-05-25
                  • 2021-05-26
                  • 2020-02-03
                  • 2018-03-05
                  • 1970-01-01
                  • 2018-05-29
                  相关资源
                  最近更新 更多