詳細資料來源于:
http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html
首先什么是跨域,簡單地理解就是因為JavaScript同源策略的限制,a.com 域名下的js無法操作b.com或是c.a.com域名下的對象。
同源策略:協議、域名、端口都相同;
1、document.domain+iframe的設置
對于主域相同而子域不同的例子,可以通過設置document.domain的辦法來解決。具體的做法是可以在http://www.a.com/a.html和http://script.a.com/b.html兩個文件中分別加上document.domain = ‘a.com’;然后通過a.html文件中創建一個iframe,去控制iframe的contentDocument,這樣兩個js文件之間就可以“交互”了。當然這種辦法只能解決主域相同而二級域名不同的情況,如果你異想天開的把script.a.com的domian設為alibaba.com那顯然是會報錯地!代碼如下:
www.a.com上的a.html
document.domain = 'a.com';
var ifr = document.createElement('iframe');
ifr.src = 'http://script.a.com/b.html';
ifr.style.display = 'none';
document.body.appendChild(ifr);
ifr.onload = function(){
var doc = ifr.contentDocument || ifr.contentWindow.document;
// 在這里操縱b.html
alert(doc.getElementsByTagName("h1")[0].childNodes[0].nodeValue);
};
script.a.com上的b.html
document.domain = 'a.com';
這種方式適用于{www.kuqin.com, kuqin.com, script.kuqin.com, css.kuqin.com}中的任何頁面相互通信。
備注:某一頁面的domain默認等于window.location.hostname。主域名是不帶www的域名,例如a.com,主域名前面帶前綴的通常都為二級域名或多級域名,例如www.a.com其實是二級域名。 domain只能設置為主域名,不可以在b.a.com中將domain設置為c.a.com。
問題:
1.安全性,當一個站點(b.a.com)被攻擊后,另一個站點(c.a.com)會引起安全漏洞。
2.如果一個頁面中引入多個iframe,要想能夠操作所有iframe,必須都得設置相同domain。
2、動態創建script
HTML里面所有帶src屬性的標簽都可以跨域,如iframe,img,script等。
原理:雖然瀏覽器默認禁止了跨域訪問,但并不禁止在頁面中引用其他域的JS文件,并可以自由執行引入的JS文件中的function(包括操作cookie、Dom等等)。
根據這一點,可以方便地通過創建script節點的方法來實現完全跨域的通信。具體的做法可以參考YUI的Get Utility
這里判斷script節點加載完畢還是蠻有意思的:ie只能通過script的readystatechange屬性,其它瀏覽器是script的load事件。以下是部分判斷script加載完畢的方法。
js.onload = js.onreadystatechange = function() {
if (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete') {
// callback在此處執行
js.onload = js.onreadystatechange = null;
}
};
3、利用iframe和location.hash
4、window.name實現的跨域數據傳輸
5、使用HTML5 postMessage
6、利用flash