JS經常使用的7中跨域方式總結

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、協議不一樣，如：http://www.a.com和https://www.a.com 

對於狀況3和4，須要經過後臺proxy來解決，具體方式以下： 
　　a、在發起方的域下建立proxy程序 
　　b、發起方的js調用本域下的proxy程序 
　　c、proxy將請求發送給接收方並獲取相應數據 
　　d、proxy將得到的數據返回給發起方的js 

代碼和ajax調用一致，其實這種方式就是經過ajax進行調用的

 

而狀況1和2除了經過後臺proxy這種方式外，還能夠有多種辦法來解決： 

1、document.domain+iframe（只能解決狀況1）： 
　　a、在發起方頁面和接收方頁面設置document.domain，並將值設爲父域的主域名(window.location.hostname) 
　　b、在發起方頁面建立一個隱藏的iframe，iframe的源是接收方頁面 
　　c、根據瀏覽器的不一樣，經過iframe.contentDocument || iframe.contentWindow.document來得到接收方頁面的內容 
　　d、經過得到的接收方頁面的內容來與接收方進行交互 
　　這種方法有個缺點，就是當一個域被攻擊時，另外一個域會有安全漏洞出現。　　　　

　　

 

2、 動態建立script(也就是jsonp)

　　a、在發起方頁面動態加載一個script，script的URL指向接收方的一個處理地址（後臺），該地址返回的javascript方法會被執行，另外URL中能夠傳入一　　些參數，該方法只支持GET方式提交參數。 

　　b、加載的script能夠在調用跨域js方法後再作一些本身的處理

　　

 

3、location.hash+iframe： 

 

　　a、發起方建立一個隱藏的iframe，iframe的源指向接收方的頁面，並經過接收方頁面的hash值來傳送數據 
　　b、發起方建立一個定時器，定時檢查本身的location.hash並做相應的處理 
　　c、接收方建立一個隱藏的iframe，iframe的源指向發起方所在域的一個代理頁面，並將接收方根據發起方傳入的數據而處理後的數據經過代理頁面的hash值來傳送 
　　d、接收方建立一個定時器，定時檢查本身的location.hash並做相應的處理 
　　e、代理頁面建立一個定時器，定時檢查本身的location.hash並同步更新發起方頁面的hash值 www.a.com/a.html#aaa，其中#aaa就是location.hash值 

　　

　　

 

4、window.name：

 

　　a、發起方頁面建立一個隱藏的iframe，而且源指向接收方頁面 
　　b、接收方在本身頁面經過script將須要傳送的數據放入window.name裏 
　　c、發起方在iframe的onload方法裏將iframe的源改成和本身在同一個域下的代理頁面(由於只能是同一個域下才能訪問window.name的值) 
　　d、獲取window.name的值(雖然iframe的源改變了，可是window.name的值不會變) 
　　window.name的值差很少能夠有2MB大小

　　

 

5、HTML5的postMessage 

 

　　a、receiverWindow.postMessage(msg, targetOrigin)，receiverWindow就是對接收消息的window的引用，能夠是iframe的contentWindow/window.open的返回值/window.frames中的一個；msg就是要發送的消息，string類型；targetOrigin用於限制receiverWindow的URI，包括主域名和端口，使用「*」表示無限制，可是爲了安全起見仍是須要設置下，以防把消息發送給惡意的網站，若是targetOrigin的URI和receiverWindow的不符，則放棄發送消息。 
　　b、接收方經過message事件來得到消息，而且經過event.origin的屬性來驗證發送方並經過event.data來得到傳送的消息內容，event.source來得到發送方的window對象

　　

 

 

6、window.opener

 

 

 

     適用於IE6、7，也就是operner hack方法，不過貌似如今已經無論用了，只要打過微軟的安全補丁.kb2497640就不能用了 
a、發起方頁面建立一個隱藏的iframe，而且源指向接收方頁面 

 

     b、發起方頁面經過iframe.contentWindow.opener = {a: function(params){...}, b: function(params){...} ...}來定義可被接收方調用的方法 
     c、接收方頁面經過window.opener.a/window.opener.b來調用發起方定義的方法 
     d、接收方頁面經過parent.opener = {c: function(params){...}, d: function(params){...} ...}來定義可被髮起方調用的方法 
     e、發起方頁面經過opener.c/opener.d來調用接收方定義的方法 

 

     其實原理就是重置opener對象

 

　　

 

 

 

7、window.navigator

 

 

 

   適用於IE6、7，貌似如今還能用，還沒被補丁掉 
   a、發起方頁面建立一個隱藏的iframe，而且源指向接收方頁面 
   b、發起方頁面經過window.navigator.a = function(params){...}; window.navigator.b = function(params){...}; 來定義被接   收方調用的方法 
   c、接收方頁面經過window.navigator.a(params); window.navigator.b(params);來調用發起方定義的方法 
   d、接收方頁面經過window.navigator.c = function(params){...}; window.navigator.d = function(params){...}; 來定義被髮起方調用的方法 
   e、發起方頁面經過window.navigator.c(params); window.navigator.d(params);來調用接收方定義的方法