您如何跨域使用window.postMessage？

似乎window.postMessage的重点是允许在不同域中托管的Windows /框架之间进行安全的通信，但实际上似乎不允许在Chrome中进行。

这是场景：

在域A的页面中嵌入<iframe>（src域B ^*为）
<iframe>最终主要是一个<script>标记，在执行结束时...
我叫window.postMessage（some_data，page_on_A）

我在Chrome中收到以下错误消息：

无法发布消息到一个。收件人有产地乙。

这是在A页面上注册消息事件侦听器的代码：

window.addEventListener(
  "message",
  function (event) {
    // Do something
  },
  false);

我也尝试调用window.postMessage(some_data, '*')，但是所有要做的就是抑制错误。

我只是在这里遗漏了一点吗，window.postMessage（...）并非要这样做吗？还是我只是做错了什么？

_{* MIME类型的text / html，必须保留。}

— 凯文·蒙特罗斯
source

您可能已经意识到了这一点，但是MDC在postMessage上有一个出色的摘要：developer.mozilla.org/en/DOM/window.postMessage对于FF实现显然，但是也许有一些原因可以解释为什么它不起作用。

— Pekka 2010年

Answers:

这是一个适用于Chrome 5.0.375.125的示例。

网页B（iframe内容）：

<html>
    <head></head>
    <body>
        <script>
            top.postMessage('hello', 'A');
        </script>
    </body>
</html>

注意使用top.postMessage或parent.postMessage不window.postMessage这里

页面A：

<html>
<head></head>
<body>
    <iframe src="B"></iframe>
    <script>
        window.addEventListener( "message",
          function (e) {
                if(e.origin !== 'B'){ return; } 
                alert(e.data);
          },
          false);
    </script>
</body>
</html>

A和B一定是这样的 http://domain.com

编辑：

从另一个问题来看，域（此处/为A和B）必须具有apostMessage才能正常工作。

— 麦克风
source

当页面A检查消息的来源时，该来源将不包含结尾的“ /”。B页是否指定尾随“ /”似乎并不重要。要注意的另一件事是URL应该是绝对URL。

— Catch22

这个答案让我有些困惑，仍然在寻找答案。 blog.teamtreehouse.com/cross-domain-messaging-with-postmessage包含有关postMessage的很好的解释。重要的是，消息发送方知道接收方的域。在上面的例子中，A和B不必是相同的域，但B必须知道使用什么域由A.

— 格雷格博古米尔

问题是关于跨域。接受的答案是关于同一域的。

— 堆叠

@stackular，不完全是。A和B可以是任何域。这就是拥有postMessage

— 麦克风的

+1。我们想确认此解决方案适用于我们的案例。我们有一个页面，其中包含来自不同域的iframe 。请注意，这仅适用于Chrome浏览器，因为在firefox中，我们需要使用window.parent.postMessage而不是top。尽管我们不知道这是否可以应用于其他任何浏览器。

— rahmatns

加载后，您应该从框架向父发布一条消息。

框架脚本：

$(document).ready(function() {
    window.parent.postMessage("I'm loaded", "*");
});

并在父母那里听：

function listenMessage(msg) {
    alert(msg);
}

if (window.addEventListener) {
    window.addEventListener("message", listenMessage, false);
} else {
    window.attachEvent("onmessage", listenMessage);
}

使用此链接可获得更多信息：http : //en.wikipedia.org/wiki/Web_Messaging

— Golyo
source

可能您尝试将数据从mydomain.com发送到www.mydomain.com或反向发送，注意您错过了“ www”。http://mydomain.com和http://www.mydomain.com与javascript是不同的域。

— Getoriks
source

在我正在做的项目中，我正在使用file:/// 仅从本地文件系统提取内容时是否会出现域错误？

— 杰克森克尔