javascript跨域的方法匯總

更新時(shí)間：2015年10月23日 11:56:58 投稿：hebedich

JavaScript出于安全方面的考慮，不允許跨域調(diào)用其他頁(yè)面的對(duì)象。但在安全限制的同時(shí)也給注入iframe或是ajax應(yīng)用上帶來(lái)了不少麻煩。這里把涉及到跨域的一些問(wèn)題簡(jiǎn)單地整理一下

此文章學(xué)習(xí)借鑒了一些其他前端同學(xué)的文章，自己做了個(gè)實(shí)踐總結(jié)

以下的例子包含的文件均為為 http://www.a.com/a.html 、http://www.a.com/c.html 與 http://www.b.com/b.html，要做的都是從a.html獲取b.html里的數(shù)據(jù)

1.JSONP

jsonp是利用script標(biāo)簽沒(méi)有跨域限制的特性，通過(guò)在src的url的參數(shù)上附加回調(diào)函數(shù)名字，然后服務(wù)器接收回調(diào)函數(shù)名字并返回一個(gè)包含數(shù)據(jù)的回調(diào)函數(shù)

  function doSomething(data) {
    // 對(duì)data處理
  }
  var script = document.createElement("script");
  script.src = "http://www.b.com/b.html?callback=doSomething";
  document.body.appendChild(script);

  // 1.生成一個(gè)script標(biāo)簽，將其append在body上，向服務(wù)器發(fā)出請(qǐng)求
  // 2.服務(wù)器根據(jù) callback 這個(gè)參數(shù)生成一個(gè)包含數(shù)據(jù)的函數(shù) doSomething({"a", "1"})
  // 3.頁(yè)面事先已聲明doSomething函數(shù)，此時(shí)執(zhí)行 doSomething(data) 這個(gè)函數(shù)，獲得數(shù)據(jù)

2.HTML5的postMessage

假設(shè)在a.html里嵌套個(gè)<iframe src="

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");
  }

這樣打開(kāi)a頁(yè)面就先彈出 a data,再?gòu)棾?b data

3.window.name + iframe

window.name的原理是利用同一個(gè)窗口在不同的頁(yè)面共用一個(gè)window.name，這個(gè)需要在a.com下建立一個(gè)代理文件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); // 現(xiàn)在a.html里建一個(gè)引用b.html的iframe，獲得b的數(shù)據(jù)

  var flag = true;
  iframe.onload = function() {
    if (flag) {
      iframe.src = "c.html"; 
// 判斷是第一次載入的話，設(shè)置代理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 頁(yè)面的數(shù)據(jù)";

4.window.location.hash + iframe

b.html將數(shù)據(jù)以hash值的方式附加到c.html的url上，在c.html頁(yè)面通過(guò)location.hash獲取數(shù)據(jù)后傳到a.html(這個(gè)例子是傳到a.html的hash上，當(dāng)然也可以傳到其他地方)

a.html

  var iframe = document.createElement("iframe");
  iframe.src = "http://www.b.com/b.html";
  document.body.appendChild(iframe); // 在a頁(yè)面引用b
  function check() { // 設(shè)置個(gè)定時(shí)器不斷監(jiān)控hash的變化，hash一變說(shuō)明數(shù)據(jù)傳過(guò)來(lái)了
    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); // 將數(shù)據(jù)附加在c.html的hash上
  }

c.html

// 獲取自身的hash再傳到a.html的hash里，數(shù)據(jù)傳輸完畢
parent.parent.location.hash = self.location.hash.substring(1);

5.CORS

CORS是XMLHttpRequest Level 2 里規(guī)定的一種跨域方式。在支持這個(gè)方式的瀏覽器里，javascript的寫(xiě)法和不跨域的ajax寫(xiě)法一模一樣，只要服務(wù)器需要設(shè)置Access-Control-Allow-Origin: *

6.document.domain

這種方式適用于主域相同，子域不同，比如 http://www.a.com和http://b.a.com
假如這兩個(gè)域名下各有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里的元素?cái)?shù)據(jù)
  }

b.html