如何解決跨域問題

1、JSONP

原理：動態插入script標籤，經過script標籤引入一個js文件，這個js文件載入成功後會執行咱們在url參數中指定的函數，而且把須要的json數據做爲參數傳入。

因爲同源策略的限制，ajax請求值容許當前源（端口、協議、域名相同）的資源，爲了實現跨域請求，能夠經過script標籤實現跨域請求，而後在服務器端輸出json數據並執行回調函數，從而解決跨域的數據請求。

優勢是兼容性好，簡單易用，支持瀏覽器與服務器雙向通訊。缺點是隻支持GET請求。

JSONP：json+padding（內填充），就是把padding填充到一個盒子裏。

 1 <script>
 2     function createJs(sUrl){
 3 
 4         var oScript = document.createElement('script');
 5         oScript.type = 'text/javascript';
 6         oScript.src = sUrl;
 7         document.getElementsByTagName('head')[0].appendChild(oScript);
 8     }
 9 
10     createJs('jsonp.js');
11 
12     box({
13        'name': 'test'
14     });
15 
16     function box(json){
17         alert(json.name);
18     }
19 </script>

 

2、CORS

CORS（Cross-Origin Resource Sharing跨域資源共享），當一個請求url的協議、端口、域名三者之間任意一與當前頁面地址不一樣即爲跨域。

例如最多見的，在一個域名下的網頁中，調用另外一個域名中的資源。它容許瀏覽器向跨源服務器發出ajax請求，從而克服了ajax只能同源使用的限制。

 

3、document.domain

document.domain用來獲取當前網頁的域名

1     <script>
2         window.onload=function(){
3             javascript:alert(document.domain);
4         }
5     </script>

瀏覽器顯示

document.domain主要解決子域與父域之間的傳值

問題描述：

現有父域：http://b.com/b.com.html

要向子域：http://a.b.com/a.b.com.html，獲取數據怎麼辦？

將document.domain='b.com'，都設置爲父域便可

將子域和父域的domcument.domain設置爲同一個父域的前提條件：這兩個域名必須屬於同一個基礎域名，並且所用的協議、端口都要一致，不然沒法利用document.domain進行跨域

 

4、window.name

window對象有個name屬性，該屬性有個特徵：即在一個窗口（window）的生命週期內，窗口載入的全部頁面都是共享一個window,name的，每一個頁面對window.name都有讀寫的權限，window.name是持久存在一個窗口載入過的全部頁面中的，並不會因新頁面的載入而進行重。

window.name+iframe實現跨域。

iframe是html的一個標籤，能夠在網頁中建立內聯框架，有個src屬性（指向文件地址、html、php等）能夠選擇內聯框架的內容。

window.name（通常在js代碼裏出現）的值不是一個普通的全局變量。而是當前窗口的名字，這裏要注意的是每一個iframe都有包裹它的window，而這個window是top window的子窗口，而它天然也有window.name的屬性，window.name的神奇之處在於name值在不一樣的頁面（甚至不一樣域名）加載後依舊存在（若是沒修改則值不會變化），而且能夠支持很是長的name值（2MB）

 

5、window.postMessage 

window.postMessage方法是html5新引進的特性，可使用它來向其餘的window對象發送消息，不管這個對象是屬於同源或不一樣源，目前IE8+、Firefox、Chrome、Opera等瀏覽器都已經支持window.postMessage方法。

調用window.postMessage方法的window對象是指要接收消息的那一個window對象，該方法的第一個參數message爲要發送的消息，類型只能爲字符串。第二個參數targetOrigin用來限定接收消息的那個window對象所在的域，若是不想限定域，可使用通配符*。

須要接收消息的window對象，能夠是經過監聽自身的message事件來獲取傳過來的消息，消息內容存儲在該事件對象的data屬性中。

上面所說的向其餘window對象發送消息，其實就是指一個頁面有幾個框架的那種狀況，由於每個框架都有一個window對象。在討論第二種方法的時候，咱們說過，不一樣域的框架間是能夠獲取到對方的window對象的，並且也可使用window.postMessage這個方法。下面看一個簡單的示例，有兩個頁面