浅谈JavaScript中的跨域解决方案

1.jsonp

    问题起源：加载非同源策略（同域名同端口）下的json数据，而使用ajax无法直接请求非同源策略下的json资源
    基本原理：在html页面中的script标签的src属性可以加载非同源策略下的资源
    使用简介：
        1.向页面中插入script标签，将src属性赋值为需要请求的接口地址
        2.页面会将请求回的资源会直接作为js进行解析，所以需要在链接之后加一个回调函数，将请求的数据进行处理
    JS代码如下：(test.json为非同源策略下的json数据)

function createJSONP(){
      var obj = document.createElement('script');
      obj.src="test.json?callback=JSONPCallback";
      document.appendChild(obj);
   }
   function JSONPCallback(result){
      //result即为请求返回的数据
      。。。。。。
   } 

    jquery等框架下的jsonp的请求方式均是基于此原理进行了封装。

2.iframe跨域

    问题起源：在web技术发展初期，人们经常使用frameset标签来在一个大的页面中嵌入多个小的页面进行布局，从而达到多个页面中的通信，在html5标准发布之后，frameset标签被废弃,当项目较为复杂时，人们开始使用iframe标签，然而，从最初的frameset到如今的iframe，同样存在着非同源策略下的父页面与子页面的通信问题
    基本原理：设置document.domain,使父页面和子页面在相同的document.domain下（以父页面为基准）

3.HTML5跨域解决方案postMessage()

4.其他方案

    window.name: 在谷歌和ie下，在一个页面a.html中定义window.name的值，在a.html未关闭的情况下,由a.html页面跳转为b.html时，可在吧b.html中获取到window.name的值