javascript跨域的方法匯總，javascript跨域

javascript跨域的方法匯總，javascript跨域

此文章學習借鑒了一些其他前端同學的文章，自己做了個實踐總結

以下的例子包含的檔案均為為 http://www.a.com/a.html 、http://www.a.com/c.html 與 http://www.b.com/b.html，要做的都是從a.html擷取b.html裡的資料

1.JSONP

jsonp是利用script標籤沒有跨域限制的特性，通過在src的url的參數上附加回呼函數名字，然後伺服器接收回呼函數名字並返回一個包含資料的回呼函數

  function doSomething(data) {    // 對data處理  }  var script = document.createElement("script");  script.src = "http://www.b.com/b.html?callback=doSomething";  document.body.appendChild(script);  // 1.產生一個script標籤，將其append在body上，向伺服器發出請求  // 2.伺服器根據 callback 這個參數產生一個包含資料的函數 doSomething({"a", "1"})  // 3.頁面事先已聲明doSomething函數，此時執行 doSomething(data) 這個函數，獲得資料

2.HTML5的postMessage

假設在a.html裡嵌套個<iframe src="http://www.b.com/b.html" frameborder="0"></iframe>,在這兩個頁面裡互相通訊

a.html

  window.onload = function() {    window.addEventListener("message", function(e) {      alert(e.data);    });    window.frames[0].postMessage("b data", "http://www.b.com/b.html");  }

b.html

  window.onload = function() {    window.addEventListener("message", function(e) {      alert(e.data);    });    window.parent.postMessage("a data", "http://www.a.com/a.html");  }

這樣開啟a頁面就先彈出 a data,再彈出 b data

3.window.name + iframe

window.name的原理是利用同一個視窗在不同的頁面共用一個window.name，這個需要在a.com下建立一個代理檔案c.html,使同源後a.html能擷取c.html的window.name

a.html

  var iframe = document.createElement("iframe");  iframe.src = "http://www.b.com/b.html";  document.body.appendChild(iframe); // 現在a.html裡建一個引用b.html的iframe，獲得b的資料  var flag = true;  iframe.onload = function() {    if (flag) {      iframe.src = "c.html"; // 判斷是第一次載入的話，設定代理c.html使和a.html在同目錄同源，這樣才能在下面的else取到data      flag = false;    } else { // 第二次載入由於a和c同源，a可以直接擷取c的window.name      alert(iframe.contentWindow.name);      iframe.contentWindow.close();      document.body.removeChild(iframe);      iframe.src = '';      iframe = null;    }  }

b.html

window.name = "這是 b 頁面的資料";

4.window.location.hash + iframe

b.html將資料以hash值的方式附加到c.html的url上，在c.html頁面通過location.hash擷取資料後傳到a.html(這個例子是傳到a.html的hash上，當然也可以傳到其他地方)

a.html

  var iframe = document.createElement("iframe");  iframe.src = "http://www.b.com/b.html";  document.body.appendChild(iframe); // 在a頁面引用b  function check() { // 設定個定時器不斷監控hash的變化，hash一變說明資料傳過來了    var hashs = window.location.hash;    if (hashs) {      clearInterval(time);      alert(hashs.substring(1));    }  }  var time = setInterval(check, 30);

b.html

  window.onload = function() {    var data = "this is b's data";     var iframe = document.createElement("iframe");    iframe.src = "http://www.a.com/c.html#" + data;    document.body.appendChild(iframe); // 將資料附加在c.html的hash上  }

c.html

// 擷取自身的hash再傳到a.html的hash裡，資料轉送完畢parent.parent.location.hash = self.location.hash.substring(1); 

5.CORS

CORS是XMLHttpRequest Level 2 裡規定的一種跨域方式。在支援這個方式的瀏覽器裡，javascript的寫法和不跨域的ajax寫法一模一樣，只要伺服器需要設定Access-Control-Allow-Origin: *

6.document.domain

這種方式適用於主域相同，子域不同，比如http://www.a.com和http://b.a.com
假如這兩個網域名稱下各有a.html 和b.html,

a.html

  document.domain = "a.com";  var iframe = document.createElement("iframe");  iframe.src = "http://b.a.com/b.html";  document.body.appendChild(iframe);  iframe.onload = function() {    console.log(iframe.contentWindow....); // 在這裡操作b.html裡的元素資料  }

b.html

  document.domain = "a.com";

注意：document.domain需要設定成自身或更高一級的父域，且主域必須相同。