您如何跨域使用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>阅读 271 </span> <br><br> <div class="ui button"> <i class="remove bookmark icon"></i> 收藏 </div> 2020-05-01 </div> <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> </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> </div> </div> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?30b336128641baa43b1404dd15891277"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script> <script>LA.init({id: "JpzbFo2d3IEdIRuU",ck: "JpzbFo2d3IEdIRuU"})</script> </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>