Js跨域小总结

教程

以下的例子包含的文件均为为http://www.a.com/a.html、http://www.a.com/c.html 与http://www.b.com/b.html ，要做的都是从a.html获取b.html里的数据

1. JSNOP

jsonp是利用script标签没有跨域限制的特性，通过在src的url的参数上附加回调函数名字，然后服务器接收回调函数名字并返回一个包含数据的回调函数

         function doSomething(data) {
             // 对data处理
         }
         var script = document.createElement("script");
         script.src = "http://www.b.com/b.html?callback=doSomething";
         document.body.appendChild(script);
        
         // 1.生成一个script标签，将其append在body上，向服务器发出请求
         // 2.服务器根据 callback 这个参数生成一个包含数据的函数 doSomething({"a", "1"})
         // 3.页面事先已声明doSomething函数，此时执行 doSomething(data) 这个函数，获得数据
             

2. HTML5的postMessage

假设在a.html里嵌套个<iframe src="http://www.b.com/b.html" frameborder="0"></iframe>,在这两个页面里互相通信

        //  a.html

        window.onload = function() {
            window.addEventListener("message", function(e) {
              alert(e.data);
            });

            window.frames[0].postMessage("b data", "http://www.b.com/b.html");
        }
             

        // b.html

        window.onload = function() {
            window.addEventListener("message", function(e) {
                alert(e.data);
            });
            window.parent.postMessage("a data", "http://www.a.com/a.html");
        }
             

这样打开a页面就先弹出 a data,再弹出 b data

3. window.name + iframe

window.name的原理是利用同一个窗口在不同的页面共用一个window.name，这个需要在a.com下建立一个代理文件c.html,使同源后a.html能获取c.html的window.name

        //  a.html

        var iframe = document.createElement("iframe");
        iframe.src = "http://www.b.com/b.html";
        document.body.appendChild(iframe); // 现在a.html里建一个引用b.html的iframe，获得b的数据

        var flag = true;
        iframe.onload = function() {
            if (flag) {
                iframe.src = "c.html";  
        // 判断是第一次载入的话，设置代理c.html使和a.html在同目录同源，这样才能在下面的else取到data
                flag = false;
            } else { // 第二次载入由于a和c同源，a可以直接获取c的window.name
                alert(iframe.contentWindow.name);

                iframe.contentWindow.close();
                document.body.removeChild(iframe);
                iframe.src = '';
                iframe = null;
            }
        }
             

        //b.html

        window.name = "这是 b 页面的数据";
             

4. window.location.hash + iframe

b.html将数据以hash值的方式附加到c.html的url上，在c.html页面通过location.hash获取数据后传到a.html(这个例子是传到a.html的hash上，当然也可以传到其他地方)

        //  a.html


        var iframe = document.createElement("iframe");
        iframe.src = "http://www.b.com/b.html";
        document.body.appendChild(iframe); // 在a页面引用b
        function check() { // 设置个定时器不断监控hash的变化，hash一变说明数据传过来了
            var hashs = window.location.hash;
            if (hashs) {
                clearInterval(time);
                alert(hashs.substring(1));
            }
        }
        var time = setInterval(check, 30);
             

        //  b.html

        window.onload = function() {
            var data = "this is b's data"; 
            var iframe = document.createElement("iframe");
            iframe.src = "http://www.a.com/c.html#" + data;
            document.body.appendChild(iframe); // 将数据附加在c.html的hash上
        }
             

        //  c.html

        // 获取自身的hash再传到a.html的hash里，数据传输完毕
        parent.parent.location.hash = self.location.hash.substring(1); 
             

5. CORS

CORS是XMLHttpRequest Level 2 里规定的一种跨域方式。在支持这个方式的浏览器里，javascript的写法和不跨域的ajax写法一模一样，只要服务器需要设置Access-Control-Allow-Origin: *

6. document.domain

这种方式适用于主域相同，子域不同，比如http://www.a.com和http://b.a.com 假如这两个域名下各有a.html 和b.html,

        //  a.html

        document.domain = "a.com";
        var iframe = document.createElement("iframe");
        iframe.src = "http://b.a.com/b.html";
        document.body.appendChild(iframe);
        iframe.onload = function() {
            console.log(iframe.contentWindow....); // 在这里操作b.html里的元素数据
        }
        

        //  b.html

        document.domain = "a.com";
             

注意：document.domain需要设置成自身或更高一级的父域，且主域必须相同。