教育行業(yè)A股IPO第一股（股票代碼 003032）

全國(guó)咨詢(xún)/投訴熱線(xiàn)：400-618-4000

UI培訓(xùn)之JS常用的七種跨域方式

更新時(shí)間:2016年03月26日10時(shí)25分 來(lái)源:傳智播客UI培訓(xùn)學(xué)院 瀏覽次數(shù):

javascript跨域有兩種情況： 
1、基于同一父域的子域之間，如：a.c.com和b.c.com 
2、基于不同的父域之間，如：www.a.com和www.b.com 
3、端口的不同，如：www.a.com:8080和www.a.com:8088 
4、協(xié)議不同，如：http://www.a.com和https://www.a.com 
對(duì)于情況3和4，需要通過(guò)后臺(tái)proxy來(lái)解決，具體方式如下： 
a、在發(fā)起方的域下創(chuàng)建proxy程序 
b、發(fā)起方的js調(diào)用本域下的proxy程序 
c、proxy將請(qǐng)求發(fā)送給接收方并獲取相應(yīng)數(shù)據(jù) 
d、proxy將獲得的數(shù)據(jù)返回給發(fā)起方的js 
代碼和ajax調(diào)用一致，其實(shí)這種方式就是通過(guò)ajax進(jìn)行調(diào)用的
而情況1和2除了通過(guò)后臺(tái)proxy這種方式外，還可以有多種辦法來(lái)解決： 
1、document.domain+iframe（只能解決情況1）： 
a、在發(fā)起方頁(yè)面和接收方頁(yè)面設(shè)置document.domain，并將值設(shè)為父域的主域名(window.location.hostname) 
b、在發(fā)起方頁(yè)面創(chuàng)建一個(gè)隱藏的iframe，iframe的源是接收方頁(yè)面 
c、根據(jù)瀏覽器的不同，通過(guò)iframe.contentDocument || iframe.contentWindow.document來(lái)獲得接收方頁(yè)面的內(nèi)容 
d、通過(guò)獲得的接收方頁(yè)面的內(nèi)容來(lái)與接收方進(jìn)行交互 
這種方法有個(gè)缺點(diǎn)，就是當(dāng)一個(gè)域被攻擊時(shí)，另一個(gè)域會(huì)有安全漏洞出現(xiàn)。 
    
2、 動(dòng)態(tài)創(chuàng)建script(也就是jsonp)
a、在發(fā)起方頁(yè)面動(dòng)態(tài)加載一個(gè)script，script的URL指向接收方的一個(gè)處理地址（后臺(tái)），該地址返回的javascript方法會(huì)被執(zhí)行，另外URL中可以傳入一些參數(shù)，該方法只支持GET方式提交參數(shù)。 
b、加載的script可以在調(diào)用跨域js方法后再做一些自己的處理
3、location.hash+iframe： 
a、發(fā)起方創(chuàng)建一個(gè)隱藏的iframe，iframe的源指向接收方的頁(yè)面，并通過(guò)接收方頁(yè)面的hash值來(lái)傳送數(shù)據(jù) 
b、發(fā)起方創(chuàng)建一個(gè)定時(shí)器，定時(shí)檢查自己的location.hash并作相應(yīng)的處理 
c、接收方創(chuàng)建一個(gè)隱藏的iframe，iframe的源指向發(fā)起方所在域的一個(gè)代理頁(yè)面，并將接收方根據(jù)發(fā)起方傳入的數(shù)據(jù)而處理后的數(shù)據(jù)通過(guò)代理頁(yè)面的hash值來(lái)傳送 
d、接收方創(chuàng)建一個(gè)定時(shí)器，定時(shí)檢查自己的location.hash并作相應(yīng)的處理 
e、代理頁(yè)面創(chuàng)建一個(gè)定時(shí)器，定時(shí)檢查自己的location.hash并同步更新發(fā)起方頁(yè)面的hash值 www.a.com/a.html#aaa，其中#aaa就是location.hash值 
  
4、window.name：
a、發(fā)起方頁(yè)面創(chuàng)建一個(gè)隱藏的iframe，并且源指向接收方頁(yè)面 
b、接收方在自己頁(yè)面通過(guò)script將需要傳送的數(shù)據(jù)放入window.name里 
c、發(fā)起方在iframe的onload方法里將iframe的源改為和自己在同一個(gè)域下的代理頁(yè)面(因?yàn)橹荒苁峭粋€(gè)域下才能訪(fǎng)問(wèn)window.name的值) 
d、獲取window.name的值(雖然iframe的源改變了，但是window.name的值不會(huì)變) 
window.name的值差不多可以有2MB大小

5、HTML5的postMessage 
a、receiverWindow.postMessage(msg, targetOrigin)，receiverWindow就是對(duì)接收消息的window的引用，可以是iframe的contentWindow/window.open的返回值/window.frames中的一個(gè)；msg就是要發(fā)送的消息，string類(lèi)型；targetOrigin用于限制receiverWindow的URI，包括主域名和端口，使用“*”表示無(wú)限制，但是為了安全起見(jiàn)還是需要設(shè)置下，以防把消息發(fā)送給惡意的網(wǎng)站，如果targetOrigin的URI和receiverWindow的不符，則放棄發(fā)送消息。 
b、接收方通過(guò)message事件來(lái)獲得消息，并且通過(guò)event.origin的屬性來(lái)驗(yàn)證發(fā)送方并通過(guò)event.data來(lái)獲得傳送的消息內(nèi)容，event.source來(lái)獲得發(fā)送方的window對(duì)象
6、window.opener（
     適用于IE6、7，也就是operner hack方法，不過(guò)貌似現(xiàn)在已經(jīng)不管用了，只要打過(guò)微軟的安全補(bǔ)丁.kb2497640就不能用了 
a、發(fā)起方頁(yè)面創(chuàng)建一個(gè)隱藏的iframe，并且源指向接收方頁(yè)面 
     b、發(fā)起方頁(yè)面通過(guò)iframe.contentWindow.opener = {a: function(params){...}, b: function(params){...} ...}來(lái)定義可被接收方調(diào)用的方法 
    c、接收方頁(yè)面通過(guò)window.opener.a/window.opener.b來(lái)調(diào)用發(fā)起方定義的方法 
    d、接收方頁(yè)面通過(guò)parent.opener = {c: function(params){...}, d: function(params){...} ...}來(lái)定義可被發(fā)起方調(diào)用的方法 
    e、發(fā)起方頁(yè)面通過(guò)opener.c/opener.d來(lái)調(diào)用接收方定義的方法 
    其實(shí)原理就是重置opener對(duì)象
7、window.navigator
   適用于IE6、7，貌似現(xiàn)在還能用，還沒(méi)被補(bǔ)丁掉 
   a、發(fā)起方頁(yè)面創(chuàng)建一個(gè)隱藏的iframe，并且源指向接收方頁(yè)面 
   b、發(fā)起方頁(yè)面通過(guò)window.navigator.a = function(params){...}; window.navigator.b = function(params){...}; 來(lái)定義被接   收方調(diào)用的方法 
   c、接收方頁(yè)面通過(guò)window.navigator.a(params); window.navigator.b(params);來(lái)調(diào)用發(fā)起方定義的方法 
   d、接收方頁(yè)面通過(guò)window.navigator.c = function(params){...}; window.navigator.d = function(params){...}; 來(lái)定義被發(fā)起方調(diào)用的方法 
   e、發(fā)起方頁(yè)面通過(guò)window.navigator.c(params); window.navigator.d(params);來(lái)調(diào)用接收方定義的方法  




本文版權(quán)歸傳智播客UI培訓(xùn)學(xué)院所有，歡迎轉(zhuǎn)載，轉(zhuǎn)載請(qǐng)注明作者出處。謝謝！
作者：傳智播客UI培訓(xùn)學(xué)院
首發(fā)：http://xamj520.com/ui 
0 分享到：
和我們?cè)诰€(xiàn)交談！