【9大跨域解决方案】postMessage解决跨域的原理

最新推荐文章于 2025-06-18 17:46:05 发布

2024路在何方

最新推荐文章于 2025-06-18 17:46:05 发布

阅读量6.5k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端跨域文章标签： postmessage 跨域原理 jsonp 同源策略

版权归作者所有，如需转载，请联系作者

本文链接：https://blog.csdn.net/qq_17175013/article/details/89165586

前端同时被 2 个专栏收录

68 篇文章

订阅专栏

跨域

8 篇文章

订阅专栏

本文深入探讨H5中postMessage API的使用，讲解如何在不同文档、窗口及跨域间进行消息传递。覆盖基本语法、事件监听及实战案例，包括同源与跨域通信的具体实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

postMessage()

这是H5引入的一个API，可以实现跨文档、多窗口、跨域消息的传递。

postMessage(data,origin)方法

data:要传递的数据
origin:字符串参数，只目标窗口的源，协议+主机+端口号[+URL]，URL会被忽略，所以可以不写
如果要传递给所有窗口，值可以为"*"
如果传给当前窗口同源的话，值可以为"/"

message

当使用postMessage传递数据的时候，目标源可以使用message方法来接受传递过来的数据

message方法

 window.addEventListener('message',function(e){
  console.log(e.data);
 })

该方法的参数e中有几个属性必须了解：

e.data 指的是传递过来的数据
e.origin 指的是发射源的域

实战举例

向同源发射信息(非跨域)

 window.postMessage('nihao','/'); 
 window.onmessage = function(e){
  console.log(e.origin);//当前源的域
  console.log(e.data);//传递过来的数据'nihao'
 }

跨域发送信息

先起两个服务，a.html起在localhost:3000上，b.html起在localhost:4000上

//a.html
<body>
 <iframe src="http://localhost:4000/b.html" frameborder="0" id="frame" "load()"></iframe>
 <script type="text/javascript">
  function load(){
   let frame = document.querySelector('#frame');
   console.log(frame);
   frame.contentWindow.postMessage('我叫俞华','http://localhost:4000')//向端口为4000的域发送内容"我叫俞华"
  }
  window.onmessage = function(e){
   console.log(e.data)
  }
 </script>
</body>

//b.html
<body>
 aaa
 <script type="text/javascript">
  window.onmessage = function(e){
   console.log('eeeeeeeee',e)
   console.log(e.data);
   //向父级（发射源）发送消息
   e.source.postMessage('你好','http://localhost:3000');
  }
 </script>
</body>