如何解决跨域问题

一、JSONP

原理：动态插入script标签，通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且把需要的json数据作为参数传入。

由于同源策略的限制，ajax请求值允许当前源（端口、协议、域名相同）的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务器端输出json数据并执行回调函数，从而解决跨域的数据请求。

优点是兼容性好，简单易用，支持浏览器与服务器双向通信。缺点是只支持GET请求。

JSONP：json+padding（内填充），就是把padding填充到一个盒子里。

<script>
    function createJs(sUrl){

        var oScript = document.createElement('script');
        oScript.type = 'text/javascript';
        oScript.src = sUrl;
        document.getElementsByTagName('head')[0].appendChild(oScript);
    }

    createJs('jsonp.js');

    box({
       'name': 'test'
    });

    function box(json){
        alert(json.name);
    }
</script>

 

二、CORS

CORS（Cross-Origin Resource Sharing跨域资源共享），当一个请求url的协议、端口、域名三者之间任意一与当前页面地址不同即为跨域。

例如最常见的，在一个域名下的网页中，调用另一个域名中的资源。它允许浏览器向跨源服务器发出ajax请求，从而克服了ajax只能同源使用的限制。

 

三、document.domain

document.domain用来获取当前网页的域名

    <script>
        window.onload=function(){
            javascript:alert(document.domain);
        }
    </script>

浏览器显示

document.domain主要解决子域与父域之间的传值

问题描述：

现有父域：http://b.com/b.com.html

要向子域：http://a.b.com/a.b.com.html，获取数据怎么办？

将document.domain='b.com'，都设置为父域即可

将子域和父域的domcument.domain设置为同一个父域的前提条件：这两个域名必须属于同一个基础域名，而且所用的协议、端口都要一致，否则无法利用document.domain进行跨域

 

四、window.name

window对象有个name属性，该属性有个特征：即在一个窗口（window）的生命周期内，窗口载入的所有页面都是共享一个window,name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的，并不会因新页面的载入而进行重。

window.name+iframe实现跨域。

iframe是html的一个标签，可以在网页中创建内联框架，有个src属性（指向文件地址、html、php等）可以选择内联框架的内容。

window.name（一般在js代码里出现）的值不是一个普通的全局变量。而是当前窗口的名字，这里要注意的是每个iframe都有包裹它的window，而这个window是top window的子窗口，而它自然也有window.name的属性，window.name的神奇之处在于name值在不同的页面（甚至不同域名）加载后依旧存在（如果没修改则值不会变化），并且可以支持非常长的name值（2MB）

 

五、window.postMessage 

window.postMessage方法是html5新引进的特性，可以使用它来向其他的window对象发送消息，无论这个对象是属于同源或不同源，目前IE8+、Firefox、Chrome、Opera等浏览器都已经支持window.postMessage方法。

调用window.postMessage方法的window对象是指要接收消息的那一个window对象，该方法的第一个参数message为要发送的消息，类型只能为字符串。第二个参数targetOrigin用来限定接收消息的那个window对象所在的域，如果不想限定域，可以使用通配符*。

需要接收消息的window对象，可以是通过监听自身的message事件来获取传过来的消息，消息内容存储在该事件对象的data属性中。

上面所说的向其他window对象发送消息，其实就是指一个页面有几个框架的那种情况，因为每一个框架都有一个window对象。在讨论第二种方法的时候，我们说过，不同域的框架间是可以获取到对方的window对象的，而且也可以使用window.postMessage这个方法。下面看一个简单的示例，有两个页面