JavaScript 跨域小總結

一. 什麼是跨域 

域名分爲：一級域名、二級域名、三級域名。例如：baidu.com（一級域名） 、www.baidu.com（二級域名）tieba.baidu.com（二級域名）、bbs.youa.baidu.com （三級域名）。

簡易記法：在域名中包含兩個點的爲二級域名，只包含一個點的爲一級域名。

跨域：因爲JavaScript同源策略的限制，a.com下的js沒法操做b.com或是c.a.com下的域名對象。詳情以下表：

URL	說明	是否容許通訊
http://www.a.com/a.js http://www.a.com/b.js	同一域名下	容許
http://www.a.com/lab/a.js http://www.a.com/script/b.js	同一域名下不一樣文件夾	容許
http://www.a.com:8000/a.js http://www.a.com/b.js	同一域名，不一樣端口	不容許
http://www.a.com/a.js https://www.a.com/b.js	同一域名，不一樣協議	不容許
http://www.a.com/a.js http://70.32.92.74/b.js	域名和域名對應ip	不容許
http://www.a.com/a.js http://script.a.com/b.js	主域相同，子域不一樣	不容許
http://www.a.com/a.js http://a.com/b.js	同一域名，不一樣二級域名（同上）	不容許（cookie這種狀況下也不容許訪問）
http://www.cnblogs.com/a.js http://www.a.com/b.js	不一樣域名	不容許

注意兩點：

1. 若是是端口和協議不一樣形成的跨域問題，「前臺」是無能爲力的；

2. 在跨域問題上，域僅僅是經過「URL的首部」來識別，而不會去嘗試判斷兩個域是否在同一個IP上。

 

二. 前臺處理跨域的方法

一、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文件之間就能夠交互了。這種辦法只能解決主域相同而二級域名不一樣的狀況，若是把document.domain設置爲baidu.com，顯然會報錯，代碼以下：

// www.a.com上的a.html
document.domain = "a.com";
var ifr = document.createElement("iframe");
ifr.src = "http://script.a.com";
ifr.style.display = "none";
document.appendChild(ifr);
ifr.onload =  function() {
     var doc = ifr.contentDocument || ifr.contentWindow.document;
     // 在這裏操做b.html
    alert(doc.getElementsByTagName("h1").childNodes[0].nodeValue);
}

// script.a.com上的b.html
document.domain = "a.com";

二、HTML5 postMessage方法

HTML5中最酷的新功能之一就是跨文檔消息傳輸（Cross Document Messaging）。下一代瀏覽器都支持這個功能：Chrome2.0+、Internet Explorer8.0+、Firefox3.0+、Opera9.6+和Safari4.0+。Facebook已經使用了這個功能，用postMessage支持基於Web的實時消息傳遞。

otherWindow.postMessage(message,targetOrigin);

   otherWindow：對接收信息頁面的window的引用。能夠是頁面中iframe的contentWindow屬性；window.open的返回值；經過name或下標從window.frames取到的值。

   message：所要發送的數據，string類型。

   targetOrigin：用於限制otherWindow，「*」表示不做限制。

代碼以下：

// a.com/index.html中的代碼
<iframe id="ifr" src="b.com/index.html"></iframe>
<script type="text/javascript">
window.onload =  function() {
     var ifr = document.getElementById("ifr");
     var targetOrigin = "http://b.com";  // 若寫成"http://b.com/c/proxy.html"，效果同樣；若寫成"http://c.com"就不會執行postMessage方法了
    ifr.contentWindow.postMessage("I was there",targetOrigin);
};
</script>

// b.com/index.html中的代碼
<script type="text/javascript">
window.addEventListener('message', function() {
     // 經過origin屬性判斷消息來源
     if(event.orgin == "http://a.com") {
        alert(event.data);   // 彈出"I was there"
        alert(event.source);  // 對a.com、index.html中window對象的引用，但因爲同源策略的限制，這裏的event.source不能夠訪問window對象
    }
}， false);
</script>

三、JSONP處理跨域

簡述原理與過程：

首先在客戶端註冊一個callback，而後把callback的名字傳給服務器。此時服務器先生成json數據。而後以JavaScript語法的方式，生成一個function，function的名字就是傳遞上來的參數jsonp。最後將json數據直接以入參的方式，放置到function中，這樣就生成了一段js語法的文檔，返回給客戶端。

客戶端瀏覽器，解析script標籤，並執行返回的JavaScript文檔，此時數據做爲參數，傳入到客戶端預先定義好的callback函數裏。 

 

 

 

引用：http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html

        http://www.nowamagic.net/librarys/veda/detail/224/ 

        http://zha-zi.iteye.com/blog/1975116