JavaScript多種跨域方式

##JSONP方式

這種方法即引入不一樣源的腳本，該腳本載入後會調用全局的某個方法的，因此只要本頁面提供該方法給它調用便可，從而達到跨域的目的。具體應用有jQuery.ajax的jsonp調用，也有script標籤引入另外腳本的方式

優勢：兼容性好，不須要XMLHttpRequest或ActiveX的支持，在請求完畢後，能夠經過調用callback回傳結果

缺點：只支持GET請求而不支持POST等其它類型的HTTP請求；只支持跨域HTTP請求這種狀況，不能解決不一樣域的兩個頁面之間如何進行JavaScript調用的問題；畢竟是腳本注入的方式，因此有必定的安全隱患；

##document.domain

在相同的一級域名/端口/協議等狀況下，將倆不一樣源的腳本的document.domain設置爲同樣的，便可達到跨域處理

##window.name 在一個窗口或者iframe中，地址的跳轉或變動，其window.name是不變的，利用這一特性來達到跨域傳遞數據的目的

##HTML5 postMessage

實現跨域POST請求

若在多個iframe之間跨域通訊，優先考慮 window.postMessage

在源a中的頁面發送消息：

windowObj.postMessage(message, targetOrigin)

在源b中的頁面接收消息：

var data = null
var windowObj = window
addEventListener("message", function(e){
    if("" === e.origin) { 
        data = e.data 
        e.source.postMessage("Get it", "*")
    }        
})

##實現跨域POST請求

參考連接

1. CORS，Cross-Origin Resource Sharing，W3C制定的跨站資源分享標準。客戶端post時會帶上Origin頭指示來源網站，服務端響應時需帶上Access-Control-Allow-Origin頭與Origin頭的值匹配，以示許可

Ajax提出了名爲CORS的標準，打破同源策略的限制，賦予了前端代碼訪問可信的遠程服務的權限。

作法：在服務器端設置Access-Control-Allow-Origin: "*"或指定域名"http://www.test.com"。詳細來講，添加受信任的服務器數據源，在HTTP的響應頭加幾行：

Access-Control-Allow-Origin: example.com
Access-Control-Request-Method: GET,POST

優勢：W3C標準方案

缺點：不兼容老瀏覽器，IE>=8（需安裝caveat）

2. invisible iframe, 經過js動態生成不可見表單和iframe，將表單的target設爲iframe的name以此經過iframe作post提交。提交後因爲跨域，沒法直接讀取響應內容。通常的作法是，iframe內經過js改變自身location的fragment，外部則監聽iframe的onload事件，讀取fragment的內容。有現成的跨域iframe通訊類庫，如jQuery PostMessage Plugin

參考：利用form表單跨域post

3. server proxy

4. flash proxy

##雙iframe方式（自創）

主應用在源a中運行，主應用提供一個全局的mainCallback回調函數。調用一個iframe嵌入源b的腳本，用它來處理問題，處理完畢後要調用mainCallback的回調函數，就再嵌入一個同源a的iframe，該iframe因爲與主應用同源，因此直接調用top.mainCallback()便可實現跨域

參考文章：http://web.jobbole.com/83412/