打个招聘广告： 杭州 阿里巴巴B2B 招前端（想去西溪的也可帮引荐），比较缺人，时机多多！广告位长期有效，有兴致简历我邮箱：854936875@qq.com

此文章进修自创了一些其他前端同砚的文章，本身做了个实践总结

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

1.JSONP

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须要设置成本身或更高一级的父域，且主域必需雷同。