使用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);