一、設(shè)置 document.domain
原理:相同主域名下不同子域頁面溪胶,通過設(shè)置document.domain讓他們同域搂擦;
限制:此方法只適用與跨子域的,對于跨父域名哗脖,仍然不可行瀑踢,且需要載入iframe頁面扳还。
domain 屬性可返回下載當(dāng)前文檔的服務(wù)器域名。
二橱夭、jsonp
原理:<script>是可以跨域的氨距,而且在跨域腳本中可以直接回調(diào)當(dāng)前腳本的函數(shù)。
限制:需要創(chuàng)建一個DOM對象并且添加到DOM樹棘劣,只能用于GET方法
三俏让、navigation 對象
原理:iframe之間是共享navigator對象的,用它來傳遞信息
要求:IE6/7
有些人注意到了IE6/7的一個漏洞:iframe之間的window.navigator對象是共享的茬暇。 我們可以把它作 為一個Messenger首昔,通過它來傳遞信息。比如一個簡單的委托:
四糙俗、window.postMessage
原理:HTML5允許窗口之間發(fā)送消息
限制:瀏覽器需要支持HTML5勒奇,獲取窗口句柄后才能相互通信
這是一個安全的跨域通信方法,postMessage(message,targetOrigin)也是HTML5引入的特性臼节。 可以給任何一個window發(fā)送消息撬陵,不論是否同源。第二個參數(shù)可以是*但如果你設(shè)置了一個URL但不 相符网缝,那么該事件不會被分發(fā)巨税。看一個普通的使用方式吧:
// 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)
原理:服務(wù)器設(shè)置Access-Control-Allow-OriginHTTP響應(yīng)頭之后草添,瀏覽器將會允許跨域請求
限制:瀏覽器需要支持HTML5,可以支持POST扼仲,PUT等方法
六. WebSocket
WebSocket protocol 是HTML5一種新的協(xié)議远寸。它實現(xiàn)了瀏覽器與服務(wù)器全雙工通信,同時允許跨域通訊屠凶,是server push技術(shù)的一種很棒的實現(xiàn)驰后。
我們先簡單看下webSocket在客戶端上的api:
var ws = new WebSocket('ws://127.0.0.1:8080/url'); //新建一個WebSocket對象,注意服務(wù)器端的協(xié)議必須為“ws://”或“wss://”矗愧,其中ws開頭是普通的websocket連接灶芝,wss是安全的websocket連接,類似于https唉韭。
ws.onopen = function() {
// 連接被打開時調(diào)用
};
ws.onerror = function(e) {
// 在出現(xiàn)錯誤時調(diào)用夜涕,例如在連接斷掉時
};
ws.onclose = function() {
// 在連接被關(guān)閉時調(diào)用
};
ws.onmessage = function(msg) {
// 在服務(wù)器端向客戶端發(fā)送消息時調(diào)用
// msg.data包含了消息
};
// 這里是如何給服務(wù)器端發(fā)送一些數(shù)據(jù)
ws.send('some data');
// 關(guān)閉套接口
ws.close();