使用window.name和postMessage实现js跨域

js的跨域问题，老生长谈了。最近使用的比较多，于是整理了下。

一、js跨域的限制：

到底什么样的情况才属于跨域呢？下图给出所有的跨域情况。根据浏览器同源策略，为了安全起见，在跨域的情况下是不允许数据传递和交互的。



二、使用window.name解决跨域问题

怿飞写过这个话题的博客： http://www.planabc.net/2008/09/01/window_name_transport/

总的来说，window.name是很巧妙的一种方法。它的原理是这样的：

（1）首先，让我们来认识一下window.name（可参考 http://www.w3school.com.cn/htmldom/prop_win_name.asp）。它寄存在浏览器中，值为

这个窗口的名称，如myWindow=window.open(src,'MyName','width=200,height=100')，那么window.name = 'MyName'。

（2）然后，用一张图描述window.name是如何取到跨域中的数据，需要一个iframe和一个本地的空文件(如：blank.html)

在onload的过程中改变iframe的src，window.name并不发生改变，此时iframe.name = window.name.



三、使用html5的postMessage解决跨域问题

html5中已经很好的提供了跨文档传输功能的API，不仅能实现同源的web网页之间通信，更能实现跨域通信。

在支持html5的浏览器中，通过window对象的postMessage来向其他窗口发送数据

步骤如下：

主页面：

window.addEventListener('message',function(event){
var val = event.data;//从iframe中传过来的信息

},false);

window.postMessage(msg,iframe url);

　　 iframe:

var val = '需要跨域的数据‘;
event.source.postMessage(val,enent.origan);

window.addEventListener('message',function(event){
var val = event.data;//从window中传过来的信息
},false);