跨域的幾種方法及優(yōu)缺點
1. JSONP跨域
優(yōu)點：它不像XMLHttpRequest對象實現(xiàn)的Ajax請求那樣受到同源策略的限制，它的兼容性更好，在更古老的瀏覽器中都可以運行，不需要XMLHttpRequest或ActiveX的支持，并且在請求完畢后可以通過調(diào)用callback的方式回傳結(jié)果
缺點：它只支持get請求而不支持post等其他類型的HTTP請求；它只支持跨域HTTP請求這種情況，不能解決不同域的兩個頁面之間如何進(jìn)行Javascript調(diào)用的問題
通過CORS跨域（只要服務(wù)器實現(xiàn)了CORS接口，就可以跨域通信）
CORS(Cross-Origin Resource Sharing)跨域資源共享，定義了必須在訪問跨域資源時，瀏覽器與服務(wù)器應(yīng)該如何溝通。CORS背后的基本思想就是使用自定義的HTTP頭部讓瀏覽器與服務(wù)器進(jìn)行溝通，從而決定請求或響應(yīng)是應(yīng)該成功還是失敗。目前所有瀏覽器都支持這個功能，IE瀏覽器不能低于10。整個CORS通信過程，都是瀏覽器自動完成，不需要用戶參與。對于開發(fā)者來說，CORS通信與同源的AJAX通信沒有差別，代碼完全一樣。瀏覽器一旦發(fā)現(xiàn)AJAX請求跨源，就會自動添加一些附加的頭信息，有時還會多出一次附加的請求，但用戶不會有感覺
- CORS與JSONP對比
- JSONP只能實現(xiàn)GET請求，而CORS能實現(xiàn)所有的HTTP請求。
- 使用CORS，開發(fā)者可以使用普通的XMLHttpRequest發(fā)起請求和獲得數(shù)據(jù)，比起JSONP有更好的錯誤處理
- JSONP主要被老的瀏覽器支持，它們旺旺不支持CORS，而絕大多數(shù)現(xiàn)代瀏覽器都已經(jīng)支持CORS
總結(jié)：CORS與JSONP相比，無疑更為先進(jìn)、方便和可靠
通過HTML5的postMessage跨域
高級瀏覽器IE8+，chrome,Firefox,Opera,Safari都支持這個功能。這個功能主要包括接受信息的“message”事件和發(fā)送消息的“postMeassage”方法。比如demo.cn域的A頁面通過iframe嵌入了一個google.com域的B頁面，可以通過以下方式實現(xiàn)A和B的通信
A頁面通過postMessage方法發(fā)送信息：
window.onload = function() {
var ifr = document.getElementById('ifr');
var targetOrigin = "http://www.google.com";
ifr.contentWindow.postMessage('hello world', targetOrigin);
}
postMessage的使用方法：
- otherWindow.postMessage(message, targetOrigin)
- otherWindow：指目標(biāo)窗口，也就是給哪個window發(fā)消息，是window.frames屬性的成員或者由window.open方法創(chuàng)建的窗口
- message：是要發(fā)送的消息，類型為String、Object（IE8、9不支持）
- targetOrigin: 是限定消息接收范圍，不限制請使用
B頁面通過message事件監(jiān)聽并接受消息：
var onmessage = function (event) {
var data = event.data;
var origin = event.origin;
var source = event.source;
if (origin === 'http://www.baidu.com') {
console.log(data);
}
}
if (typeof window.addEventListener !== 'undefined') {
window.addEventListener('message', onmessage, false);
} else if (typeof window.attachEvent !== 'undefined') {
window.attchEvent('onmessage', onmessage);
}
同理，也可以B頁面發(fā)送消息，然后A頁面監(jiān)聽并接受消息
