如何跨域使用window.postMessage？

看起来 window.postMessage 的目的是允许不同域上托管的窗口/框架之间进行安全通信，但实际上在 Chrome 中似乎并没有允许。

场景如下：

在域 A 的页面中嵌入（域 B 上有 <pre><code>src</code></pre><sup>*</sup>）</li> <li><iframe>最终主要是一个<script>标签，在其执行结束时...</li> <li>我调用 window.postMessage( <em>some_data</em>, <em>page_on_A</em> )</li> </ol> <p> <iframe> 绝对是在域 B 的上下文中，并且我已经确认 <iframe> 中嵌入的 javascript 可以正确执行并使用正确的值调用 <pre><code>postMessage</code></pre>。</p> <p>我在 Chrome 中收到此错误消息：</p> <blockquote> <p>无法向<em>A</em>发布消息。收件人有来源 <em>B</em>。</p> </blockquote> <p>下面是在A上的页面中注册消息事件监听器的代码：</p> <pre><code>window.addEventListener( "message", function (event) { // Do something }, false); </code></pre> <p>我也尝试过调用 <pre><code>window.postMessage(some_data, '*')</code></pre>，但所做的只是抑制错误。</p> <p>我是否错过了这里的要点，window.postMessage(...) 不是为此目的吗？或者我只是做错了？</p> <p><sub>*Mime类型的text/html，必须保留。</sub></p> </question> <answer tick="true" vote="87"> <p>这是一个适用于 Chrome 5.0.375.125 的示例。</p> <p>B页面（iframe内容）：</p> <pre><code><html> <head></head> <body> <script> top.postMessage('hello', 'A'); </script> </body> </html> </code></pre> <p>注意这里使用的是 <pre><code>top.postMessage</code></pre> 或 <pre><code>parent.postMessage</code></pre> 而不是 <pre><code>window.postMessage</code></pre></p> <p>页面A：</p> <pre><code><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> </code></pre> <p>A 和 B 必须类似于 <pre><code>http://domain.example</code></pre></p> <p>从<a href="https://stackoverflow.com/questions/6411762">另一个问题</a>来看，域（这里的A和B）必须有一个<pre><code>/</code></pre>才能使<pre><code>postMessage</code></pre>正常工作。</p> </answer> <answer tick="false" vote="30"> <p>加载后，您应该从框架向父级发布消息。</p> <p>框架脚本：</p> <pre><code>$(document).ready(function() { window.parent.postMessage("I'm loaded", "*"); }); </code></pre> <p>并在家长中听：</p> <pre><code>function listenMessage(msg) { alert(msg); } if (window.addEventListener) { window.addEventListener("message", listenMessage, false); } else { window.attachEvent("onmessage", listenMessage); } </code></pre> <p>使用此链接了解更多信息：<a href="http://en.wikipedia.org/wiki/Web_Messaging">http://en.wikipedia.org/wiki/Web_Messaging</a></p> </answer> <answer tick="false" vote="1"> <p>可能您尝试将数据从<pre><code>mydomain.example</code></pre>发送到<pre><code>www.mydomain.example</code></pre>或反向发送，请注意您错过了“www”。 <pre><code>http://mydomain.example</code></pre> 和 <pre><code>http://www.mydomain.example</code></pre> 与 JavaScript 是不同的领域。</p> </answer> </body></html>

问题描述投票：0回答：0

最新问题

如何跨域使用window.postMessage？

问题描述 投票：0回答：0

最新问题

问题描述投票：0回答：0