您如何跨域使用window.postMessage？

一尘不染

您如何跨域使用window.postMessage？

javascript

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

这是场景：

在域A的页面中嵌入（<code>src</code>域B *为）</li> <li><iframe>最终主要是一个<script>标记，在执行结束时…</li> <li>我叫window.postMessage（ <em>some_data</em> ， <em>page_on_A</em> ）</li> </ol> <iframe>绝对是在域B的上下文中，并且我已经确认<iframe>中的嵌入式javascript可以正确执行并`postMessage`使用正确的值进行调用。我在Chrome中收到以下错误消息： > 无法发布消息到 _一个_ 。收件人有产地 _乙_ 。这是在A页面上注册消息事件侦听器的代码： window.addEventListener( "message", function (event) { // Do something }, false); 我也尝试调用`window.postMessage(some_data, '*')`，但所有操作都是抑制错误。我只是在这里遗漏了一点，是不是window.postMessage（...）并非要这样做？还是我只是做错了什么？ * MIME类型的text / html，必须保留。 </div> <br> <span>阅读 234 </span> <br><br> <div class="ui button"> <i class="remove bookmark icon"></i> 收藏 </div> 2020-05-01 </div> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5812992211126268" crossorigin="anonymous"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5812992211126268" data-ad-slot="2602551727" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <h2> 共1个答案</h2> <div class="ui segment" style="margin-bottom:20px;"> <div class="stackable"> <strong>一尘不染</strong> <br/><br/> <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>注意使用<code>top.postMessage</code>或<code>parent.postMessage</code>不<code>window.postMessage</code>这里</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一定是这样的 <code>http://domain.com</code></p> <div style="font-size:12px"> <span>2020-05-01 </span> </div> </div> </div> </div> <div class="col-md-4 bd-toc"> <div class="ui segment"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5812992211126268" crossorigin="anonymous"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5812992211126268" data-ad-slot="9167960078" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="ui segment"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5812992211126268" crossorigin="anonymous"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5812992211126268" data-ad-slot="9167960078" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> </div>  <footer class="es-footer"> <div class="copyright"> <div class="container"> Powered by <a href="http://www.codingdict.com/" target="_blank">CodingDict</a> ©2014-2020 <a class="mlm" href="http://www.codingdict.com/" target="_blank">编程字典</a> <a class="mlm" href="http://www.codingdict.com/courses">课程存档</a> <div class="mts"> 课程内容版权均归 <a href="http://www.codingdict.com/"> CodingDict </a> 所有 <a class="mlm" href="https://beian.miit.gov.cn/" target="_blank"> 京ICP备18030172号 </a> <span> 商务合作：15011039890（微信手机同号）</span> </div> </div> </div> </footer> <script type="text/javascript" src="/static/plugins/js/jquery.min.js"></script> <script type="text/javascript" src="/static/assets/js/bootstrap.min.js"></script> <script type="text/javascript" src="/static/plugins/js/ace.js"></script> <script type="text/javascript" src="/static/plugins/js/resizable.min.js"></script> <script type="text/javascript" src="/static/plugins/js/semantic.min.js"></script> <script type="text/javascript" src="/static/plugins/js/emojis.min.js"></script> <script type="text/javascript" src="/static/plugins/js/highlight.min.js"></script> <script type="text/javascript" src="/static/martor/js/martor.min.js"></script> </div> </body> </html>