一、設置 document.domain
原理:相同主域名下不同子域頁面,通過設置document.domain讓他們同域;
限制:此方法只適用與跨子域的,對于跨父域名,仍然不可行,且需要載入iframe頁面。
domain 屬性可返回下載當前文檔的服務器域名。
二、jsonp
原理:<script>是可以跨域的,而且在跨域腳本中可以直接回調當前腳本的函數。
限制:需要創建一個DOM對象并且添加到DOM樹,只能用于GET方法
三、navigation 對象
原理:iframe之間是共享navigator對象的,用它來傳遞信息
要求:IE6/7
有些人注意到了IE6/7的一個漏洞:iframe之間的window.navigator對象是共享的。 我們可以把它作 為一個Messenger,通過它來傳遞信息。比如一個簡單的委托:
四、window.postMessage
原理:HTML5允許窗口之間發送消息
限制:瀏覽器需要支持HTML5,獲取窗口句柄后才能相互通信
這是一個安全的跨域通信方法,postMessage(message,targetOrigin)也是HTML5引入的特性。 可以給任何一個window發送消息,不論是否同源。第二個參數可以是*但如果你設置了一個URL但不 相符,那么該事件不會被分發。看一個普通的使用方式吧:
// URL: http://bentos.com/foo
var win = window.open('http://b.com/bar');
win.postMessage('Hello, bar!', 'http://b.com');
// URL: http://baidu.com/bar
window.addEventListener('message',function(event) {
console.log(event.data);
});
五、跨域資源共享(CORS)
原理:服務器設置Access-Control-Allow-OriginHTTP響應頭之后,瀏覽器將會允許跨域請求
限制:瀏覽器需要支持HTML5,可以支持POST,PUT等方法
六. WebSocket
WebSocket protocol 是HTML5一種新的協議。它實現了瀏覽器與服務器全雙工通信,同時允許跨域通訊,是server push技術的一種很棒的實現。
我們先簡單看下webSocket在客戶端上的api:
var ws = new WebSocket('ws://127.0.0.1:8080/url'); //新建一個WebSocket對象,注意服務器端的協議必須為“ws://”或“wss://”,其中ws開頭是普通的websocket連接,wss是安全的websocket連接,類似于https。
ws.onopen = function() {
// 連接被打開時調用
};
ws.onerror = function(e) {
// 在出現錯誤時調用,例如在連接斷掉時
};
ws.onclose = function() {
// 在連接被關閉時調用
};
ws.onmessage = function(msg) {
// 在服務器端向客戶端發送消息時調用
// msg.data包含了消息
};
// 這里是如何給服務器端發送一些數據
ws.send('some data');
// 關閉套接口
ws.close();