解决跨域问题（二）

学习总结

postMessage

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

postMessage(data,origin)方法

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

message

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

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

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

document.domain

document.domain这个方法使用极其简单，但是也有较大的限制，主要用于主域相同的域之间的数据通信。
● http://a.yuhua.com:3000/a.html起a.html
● http://b.yuhua.com:3000/b.html起b.html
(两者是跨域的)

//a.html
<iframe src="http://b.yuhua.com:4000/b.html" "load()" id="frame"></iframe>
<script type="text/javascript">
  document.domain = 'yuhua.com';
  function load(){
    console.log(frame.contentWindow.name);
  }
</script>

//b.html
<script type="text/javascript">
  document.domain = 'yuhua.com';
  var name = 'yuhua';
</script>

location.hash解决跨域的原理

该方法跟window.name类似，有点神奇，有点绕，鲜有人用，但确实能够实现跨域通信。那么，我们下面详细讲解下如何利用hash实现跨域。

1. a.html,起在localhost:3000上
2. b.html,起在localhost:3000上
3. c.html,起在localhost:4000上
   a给c传一个hash值，c收到hash值后，c把hash值传递给b，b把结果放到a的hash中