摘要：開發(fā)者需要在中設(shè)置屬性為跨域是的簡稱這是一種利用瀏覽器漏洞解決跨域的辦法腳本元素可以不受瀏覽器同源策略的限制。

同源是指,域名,協(xié)議,端口號均相同,如圖:

注意:localhost和127.0.0.1雖然都指向本機,但也是跨域.

瀏覽器同源策略(same-origin policy).簡單的講,同源策略就是瀏覽器為了保證用戶安全,防止惡意的網(wǎng)站盜取數(shù)據(jù),禁止不同域之間的JS進行交互.會限制如下行為:

Cookie,LocalStorage 和indexDB無法讀取.

DOM無法獲取.

AJAX請求不能發(fā)送.

CORS是跨域資源共享(Crocss-Origin Resource Sharing)的縮寫.是W3C標(biāo)準(zhǔn).跨域資源共享機制允許Web應(yīng)用服務(wù)器進行跨域訪問控制,從而使跨域傳輸?shù)靡园踩M行.對于這個方式阮一峰老師有一篇文章專門講這個的,跨域資源共享CORS詳解可供參考.還有就是MDN里有關(guān)于HTTP訪問控制的文檔.HTTP訪問控制CORS

簡單的說就是:

請求方在頭信息中多一個Origin字段來說明本次請求來自哪個源.(協(xié)議+域名+端口)
服務(wù)器響應(yīng)頭信息中會多幾個字段

Access-Control-Allow-Origin

該字段是必須的。它的值要么是請求時Origin字段的值，要么是一個*，表示接受任意域名的請求.

Access-Control-Allow-Credentials

該字段可選。它的值是一個布爾值，表示是否允許發(fā)送Cookie。默認(rèn)情況下，Cookie不包括在CORS請求之中。設(shè)為true，即表示服務(wù)器明確許可，Cookie可以包含在請求中，一起發(fā)給服務(wù)器。這個值也只能設(shè)為true，如果服務(wù)器不要瀏覽器發(fā)送Cookie，刪除該字段即可.

Access-Control-Expose-Headers

該字段可選。CORS請求時，XMLHttpRequest對象的getResponseHeader()方法只能拿到6個基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必須在Access-Control-Expose-Headers里面指定。上面的例子指定，getResponseHeader("FooBar")可以返回FooBar字段的值。

開發(fā)者需要在AJAX中設(shè)置withCredentials屬性為true.

JSONP是JSON with Padding的簡稱.這是一種利用瀏覽器漏洞解決跨域的辦法.HTML腳本元素可以不受瀏覽器同源策略的限制。即我們請求HTML、CSS、JS文件時瀏覽器不會做限制。所以運用這個特點，通過加載外部js文件的方式來向其他資源發(fā)出http請求。正是因為是請求文件,所以JOSNP只能GET,不能POST.簡單來說,JSONP方案就是頁面動態(tài)創(chuàng)建一個script標(biāo)簽.

//b頁面

頁面與嵌套的iframe消息

//a頁面

var iframe = document.getElementsByTagName("iframe")[0];
window.onMessage = function(event) {
    if(event.source == iframe.contentWindow) {}   //嵌套iframe除了origin外還可以比較用source
}

//iframe頁面
window.parent.postMessage(data, target)
window.addEventListener("message",function(e){
    if(e.source!=window.parent) return;     //子頁面可以通過此方法判斷是否是父頁面的消息
    window.parent.postMessage("data","*");
},false);

多窗口之間消息傳遞不是指我用瀏覽器分別打開了兩個頁面，就能互相通信了。需要一個otherWindow，一個其他窗口的引用 window.postMessage

語法 ——> otherWindow.postMessage(message, targetOrigin, [transfer]);
otherWindow ——> 其他窗口的一個引用，比如iframe的contentWindow屬性、執(zhí)行window.open返回的窗口對象、或者是命名過或數(shù)值索引的window.frames。
message ——> 將要發(fā)送到其他 window的數(shù)據(jù)
targetOrigin——> 通過窗口的origin屬性來指定哪些窗口能接收到消息事件，其值可以是字符串"*"（表示無限制）或者一個URI。

iframe跨域也是利用瀏覽器中帶有src的標(biāo)簽可以跨域訪問.凡是擁有src屬性的標(biāo)簽都有跨域的能力.例如:

子窗口(http://script.a.com/b.html)

這樣就能在子窗口獲取父窗口里的數(shù)據(jù)了.

1、安全性，當(dāng)一個站點（b.a.com）被攻擊后，另一個站點（c.a.com）會引起安全漏洞。
2、如果一個頁面中引入多個iframe，要想能夠操作所有iframe，必須都得設(shè)置相同domain。

對于主域不同的情形,可用location.hash 和window.name解決.

原理是利用location.hash來進行傳值。在url： http://a.com#segmentfault中的‘#segmentfault’就是location.hash，改變hash并不會導(dǎo)致頁面刷新，所以可以利用hash值來進行數(shù)據(jù)傳遞，當(dāng)然數(shù)據(jù)容量是有限的。假設(shè)域名a.com下的文件test1.html要和b.com域名下的test2.html傳遞信息，test1.html首先創(chuàng)建自動創(chuàng)建一個隱藏的iframe，iframe的src指向b.com域名下的test2.html頁面，這時的hash值可以做參數(shù)傳遞用。test2.html響應(yīng)請求后再將通過修改test1.html的hash值來傳遞數(shù)據(jù)（由于兩個頁面不在同一個域下IE、Chrome不允許修改parent.location.hash的值，所以要借助于a.com域名下的一個代理iframe；Firefox可以修改）。同時在test1.html上加一個定時器，隔一段時間來判斷l(xiāng)ocation.hash的值有沒有變化，一點有變化則獲取獲取hash值。

a.com下的test1.html

function startRequest(){
    var iframe = document.createElement("iframe");
    iframe.style.display = "none";
   iframe.src = "http://www.b.com/test2.html#paramdo";
    document.body.appendChild(iframe);
}

function checkHash() {
    try {
        var data = location.hash ? location.hash.substring(1) : "";
        if (console.log) {
            console.log("Now the data is "+data);
        }
    } catch(e) {};
}
setInterval(checkHash, 2000);

b.com域名下的test2.html

//模擬一個簡單的參數(shù)處理操作
switch(location.hash){
    case "#paramdo":
        callBack();
        break;
    case "#paramset":
        //do something……
        break;
}

function callBack(){
    try {
        parent.location.hash = "somedata";
    } catch (e) {
        // ie、chrome的安全機制無法修改parent.location.hash，
        // 所以要利用一個中間的b.com域下的代理iframe
        var iframeproxy = document.createElement("iframe");
        iframeproxy.style.display = "none";
        iframeproxy.src = "http://a.com/test3.html#somedata"; 
        // 注意該文件在"a.com"域下
        document.body.appendChild(iframeproxy);
    }
}

a.com域名下的test3.html

//因為parent.parent和自身屬于同一個域，所以可以改變其location.hash的值
parent.parent.location.hash = self.location.hash.substring(1);

缺點,暴露數(shù)據(jù)在url中.

對于主域不同的情形,可用location.hash 和window.name解決.

iframe的src屬性由外域轉(zhuǎn)向本地域，跨域數(shù)據(jù)即由iframe的window.name從外域傳遞到本地域。這個就巧妙地繞過了瀏覽器的跨域訪問限制，但同時它又是安全操作。

有三個頁面:

a.com/test1.html :應(yīng)用頁面

a.com/proxy.html :代理頁面,需要和應(yīng)用頁面在同一域下.

b.com/test2.html : 存放應(yīng)用頁面需要用到數(shù)據(jù)的頁面(數(shù)據(jù)頁面)

具體過程:

1) 應(yīng)用頁面創(chuàng)建一個iframe,src指向數(shù)據(jù)頁面.數(shù)據(jù)頁面會把數(shù)據(jù)附加到這個iframe的window.name上.

b.com/test2.html 代碼

2) 在應(yīng)用頁面中監(jiān)聽iframe的onload事件,在事件中設(shè)置這個iframe的src指向本地域的代理文件(代理頁面和應(yīng)用頁面在同一域下,可以相互通信.)
a.com/test1.html 代碼

3) 獲取數(shù)據(jù)以后銷毀這個iframe,釋放內(nèi)存.這也保證了安全性.(不被其他域iframe 訪問)

window.top方法可以訪問最頂層的window對象，可以取到最頂層window對象的屬性和方法。這樣子框架就可以操作父頁面的交互了。window.parent可以得到父框架的window對象。

1) a頁面代碼

2) b頁面的代碼

3) c頁面代碼

cookie除了有exprise這個屬性之后還有path這個屬性，這個屬性是用來設(shè)置可訪問到cookie的路徑的，默認(rèn)的是在當(dāng)前cookie頁面的子目錄下是可以訪問到的，但是默認(rèn)的情況下我們是無法再其他父目錄下面訪問到這個cookie，這個時候我們就可以通過設(shè)置cookie來實現(xiàn)這個功能

如上面所說，但是在跨域之間的傳值要怎樣實現(xiàn)呢，其實cookie除了有path，還存在domain，domain這個屬性是可以實現(xiàn)跨域的，但是必須保證這兩個域名有公共部分，何為公共部分？就是像www.qq.com和www.sport.qq.com 這樣都有相同的qq.com的域名，具體的使用方法是把domain設(shè)置為相同部分的域名，具體如下：

document.cookie = "name=value;expires=date;path=/;domain=qq.com"

另外在使用cookie的時候我們還需要注意的是cookie的編碼問題，因為在cookie是不支持逗號、空格、分號的，所以在設(shè)置cookie的時候，需要使用escape()將輸入的信息進行轉(zhuǎn)碼，然后在要調(diào)用的時候使用unescape()來重新轉(zhuǎn)換回來.

WebSocket對象提供了用于創(chuàng)建和管理 WebSocket 連接，以及可以通過該連接發(fā)送和接收數(shù)據(jù)的 API。

WebSocket構(gòu)造器方法接受一個必須的參數(shù)和一個可選的參數(shù)：

WebSocket WebSocket(in DOMString url, in optional DOMString protocols);
WebSocket WebSocket(in DOMString url,in optional DOMString[] protocols);

url :表示要連接的URL。這個URL應(yīng)該為響應(yīng)WebSocket的地址。
protocoles 可以是一個單個的協(xié)議名字字符串或者包含多個協(xié)議名字字符串的數(shù)組。這些字符串用來表示子協(xié)議，這樣做可以讓一個服務(wù)器實現(xiàn)多種WebSocket子協(xié)議（例如你可能希望通過制定不同的協(xié)議來處理不同類型的交互）。如果沒有制定這個參數(shù)，它會默認(rèn)設(shè)為一個空字符串。(可選)
構(gòu)造器方法可能拋出以下異常：
SECURITY_ERR 試圖連接的端口被屏蔽。

WebSocket protocol是HTML5一種新的協(xié)議。它實現(xiàn)了瀏覽器與服務(wù)器全雙工通信，同時允許跨域通訊，是server push技術(shù)的一種很好的實現(xiàn)。
原生WebSocket API使用起來不太方便，我們使用Socket.io，它很好地封裝了webSocket接口，提供了更簡單、靈活的接口，也對不支持webSocket的瀏覽器提供了向下兼容。具體可參閱前端常見跨域解決方案

H5新接口window.postMessage MDN
HTTP訪問控制CORS MDN
跨域資源共享CORS詳解
JavaScript跨域總結(jié)與解決辦法
詳解跨域(最全的解決方案)
淺談幾種跨域的方法
H5新接口webSocket MDN