postMessage()

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

postMessage(data,origin)方法

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

message

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

message方法

 window.addEventListener('message',function(e){
  console.log(e.data);
 })
  • 该方法的参数e中有几个属性必须了解：
  1. e.data 指的是传递过来的数据
  2. e.origin 指的是发射源的域

实战举例

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

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

跨域发送信息

  1. 先起两个服务，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>

实现跨域的9种方法