当前位置：文江博客话题详情

如何跨域使用window.postMessage？

发布于 2024-09-14 08:01:58 字数 954 浏览 8 评论 0原文

似乎 window.postMessage 的目的是允许 windows/ 之间的安全通信框架托管在不同的域上，但实际上 Chrome 中似乎不允许这样做。

场景如下：

嵌入的页面中
（在域 B^* 上有 src）在域A 最终大部分是一个
我调用 window.postMessage( some_data, page_on_A

)绝对是在域 B 的上下文中，并且我已经确认中嵌入的 javascript 是正确的。正确执行并使用正确的值调用 <code>postMessage</code> 。

我在 Chrome 中收到此错误消息：

无法向A发布消息。收件人来源为 B。

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

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

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

我是否只是错过了这里的要点，window.postMessage(...) 不是为此目的吗？或者我只是做错了？

_{*Mime-type text/html，必须保留。}

原文

It seems like the point of window.postMessage is to allow safe communication between windows/frames hosted on different domains, but it doesn't actually seem to allow that in Chrome.

Here's the scenario:

Embed an <iframe> (with a src on domain B^*) in a page on domain A
The <iframe> ends up being mostly a <script> tag, at the end of which's execution...
I call window.postMessage( some_data, page_on_A )

The <iframe> is most definitely in the context of domain B, and I've confirmed that the embedded javascript in that <iframe> executes properly and calls postMessage with the correct values.

I get this error message in Chrome:

Unable to post message to A.
Recipient has origin B.

Here's the code that registers a message event listener in the page on A:

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

I've also tried calling window.postMessage(some_data, '*'), but all that does is suppress the error.

Am I just missing the point here, is window.postMessage(...) not meant for this? Or am I just doing it horribly wrong?

_{*Mime-type text/html, which it must remain.}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

诗酒趁年少 2024-09-21 08:01:58

以下是适用于 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.example

从另一个问题，它看起来是域（这里的 A 和 B）必须有一个 / 才能让 postMessage 正常工作。

Here is an example that works on Chrome 5.0.375.125.

The page B (iframe content):

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

Note the use of top.postMessage or parent.postMessage not window.postMessage here

The page 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 and B must be something like http://domain.example

From another question, it looks the domains(A and B here) must have a / for the postMessage to work properly.

回复收藏 0 原文

z祗昰~ 2024-09-21 08:01:58

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

框架脚本：

$(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< /a>

You should post a message from frame to parent, after loaded.

frame script:

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

And listen it in parent:

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

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

Use this link for more info: http://en.wikipedia.org/wiki/Web_Messaging

回复收藏 0 原文

违心° 2024-09-21 08:01:58

也许您尝试将数据从 mydomain.example 发送到 www.mydomain.example 或反向发送，请注意您错过了“www”。 http://mydomain.example 和 http://www.mydomain.example 是 JavaScript 的不同域。