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

Posted 2023-02-24

技术标签:

【中文标题】无法在“DOMWindow”上执行“postMessage”：提供的目标原点与接收窗口的原点不匹配（“null”）【英文标题】：Failed to execute 'postMessage' on 'DOMWindow': The target origin provided does not match the recipient window's origin ('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').

怎么了？

【问题讨论】：

【参考方案1】：

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

【讨论】：

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

要检查框架是否已加载，请使用 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');

【讨论】：

【参考方案3】：

发生这种情况的另一个原因是，如果您使用的 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 不匹配。【参考方案4】：

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

【讨论】：

【参考方案5】：

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

【讨论】：

【参考方案6】：

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

【讨论】：

【参考方案7】：

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

【讨论】：

【参考方案8】：