javascript跨域的幾種方法

打個招聘廣告: 杭州 阿里巴巴B2B 招前端(想去西溪的也可幫推薦),比較缺人,機會多多!廣告位長期有效,有興趣簡歷我郵箱:854936875@qq.com

此文章學習借鑑了一些其餘前端同窗的文章,本身作了個實踐總結javascript

如下的例子包含的文件均爲爲 http://www.a.com/a.htmlhttp://www.a.com/c.htmlhttp://www.b.com/b.html,要作的都是從a.html獲取b.html裏的數據html

1.JSONP

jsonp是利用script標籤沒有跨域限制的特性,經過在srcurl的參數上附加回調函數名字,而後服務器接收回調函數名字並返回一個包含數據的回調函數前端

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>,在這兩個頁面裏互相通訊java

a.htmlajax

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

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

b.htmljson

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.htmlwindow.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.htmlapp

window.name = "這是 b 頁面的數據";

4.window.location.hash + iframe

b.html將數據以hash值的方式附加到c.htmlurl上,在c.html頁面經過location.hash獲取數據後傳到a.html(這個例子是傳到a.htmlhash上,固然也能夠傳到其餘地方)

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

CORSXMLHttpRequest Level 2 裏規定的一種跨域方式。在支持這個方式的瀏覽器裏,javascript的寫法和不跨域的ajax寫法如出一轍,只要服務器須要設置Access-Control-Allow-Origin: *

6.document.domain

這種方式適用於主域相同,子域不一樣,好比http://www.a.comhttp://b.a.com
假如這兩個域名下各有a.htmlb.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須要設置成自身或更高一級的父域,且主域必須相同。

相關文章
相關標籤/搜索