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

Question

我在 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').

怎么了？

Answer 1

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

Answer 2

发生这种情况的另一个原因是，如果您使用的 iframe 具有沙箱属性并且未设置

allow-same-origin

，例如：

// page.html
<iframe id="f" src="http://localhost:8000/iframe.html" sandbox="allow-same-origin"></iframe> /* https://www.w3schools.com/tags/att_iframe_sandbox.asp */
<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!", '*');

Answer 3

相关注意事项：当从 iframe 向主机页面发送消息时，如果您忘记使用 window.top.postMessage，您将收到此错误。

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

Answer 4

使用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');

Answer 5

就我而言，我没有添加

http://

前缀。可能值得检查。

Answer 6

在我的例子中，SSL 证书对于 iframe 域无效，因此请确保您尝试向其发送消息的 iframe URL 已打开且没有任何问题（如果您通过

https

加载 iframe）。

Answer 7

我尝试在父页面和嵌入式 iframe 之间进行跨域消息传递。使用失败

window.postMessage('text', '*');

- iframe 端从未收到该消息。

更改为这个就可以了：

document.querySelector('iframe').contentWindow.postMessage('text', '*');

Answer 8

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

Answer 9

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

Answer 10

在我的例子中，应用程序通过 SSL (HTTPS) 提供服务，并且 iframe 正在调用纯 HTTP 页面。出于安全原因，我的浏览器阻止了该请求。我需要通过单击 URL 旁边的挂锁或使用 iframe 页面的 https 链接来禁用它。

Answer 11

获取此消息的最简单方法是忘记调用中的第二个“来源”参数

postMessage(message, origin)

。在这种情况下，“来源”是指您愿意向其发送消息的页面的来源。 （用户可能已经偏离了您假设的原点。这使您有机会保护自己。输入“*”以排除此问题的原因。）