无法在“DOMWindow”上执行“postMessage”：提供的目标原点与接收窗口的原点不匹配（“null”）答案

【问题标题】：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 也被拒绝访问。然后我尝试'*' 作为原点，它可以工作。结果主机 localhost 和 127.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', '*');

【讨论】：