Javascript中跨域方式有哪些

這篇文章將為大家詳細(xì)講解有關(guān)Javascript中跨域方式有哪些，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

1.window.name

window 對(duì)象的name屬性是一個(gè)很特別的屬性，當(dāng)在 frame 中加載新頁(yè)面時(shí)，name 的屬性值依舊保持不變。那么我們可以在頁(yè)面 A中用iframe加載其他域的頁(yè)面B，而頁(yè)面B中用JavaScript把需要傳遞的數(shù)據(jù)賦值給window.name，iframe加載完成之后，此時(shí) name 屬性值可被獲取到，以訪問 Web 服務(wù)發(fā)送的信息。但 name 屬性僅對(duì)相同域名的 frame 可訪問。這意味著為了訪問 name 屬性，當(dāng)遠(yuǎn)程 Web 服務(wù)頁(yè)面被加載后，必須導(dǎo)航 frame 回到原始域。即頁(yè)面A修改iframe的地址，將其變成同域的一個(gè)地址，然后就可以讀出window.name的值了。一旦 name 屬性獲得，銷毀 frame 。這個(gè)方式非常適合單向的數(shù)據(jù)請(qǐng)求，而且協(xié)議簡(jiǎn)單、安全。

頁(yè)面B(www.jesse.com/data.html)代碼如下：

<script type="text/javascript">
window.name = 'I was there!';
// 這里是要傳輸?shù)臄?shù)據(jù)，大小一般為2M，IE和firefox下可以大至32M左右
// 數(shù)據(jù)格式可以自定義，如json、字符串
</script>

頁(yè)面A(www.jack.com/index.html)代碼如下：

<script type="text/javascript">
var state = 0,
  iframe = document.createElement('iframe'),
  loadfn = function() {
    if (state === 1) {
      var data = iframe.contentWindow.name; // 讀取數(shù)據(jù)
      console.log(data); //彈出'I wasthere!'
      (function(){
        //獲取數(shù)據(jù)以后銷毀這個(gè)iframe。
        iframe.contentWindow.document.write('');
        iframe.contentWindow.close();
        document.body.removeChild(iframe);
      })();
    } else if (state === 0) {
      state = 1;
      // 設(shè)置的代理頁(yè)面使其回原始域
      iframe.contentWindow.location = "http://www.jack.com/proxy.html"; 
    }
  };
iframe.src = 'http://www.jesse.com/data.html';
if (iframe.attachEvent) {
  iframe.attachEvent('onload', loadfn);
} else {
  iframe.onload = loadfn;
}
document.body.appendChild(iframe);
</script>

2.具備src的標(biāo)簽

雖然瀏覽器默認(rèn)禁止了跨域訪問，但并不禁止在頁(yè)面中用標(biāo)簽的src屬性引用其他域的文件。根據(jù)這一點(diǎn)，可以方便地通過創(chuàng)建具有src屬性的節(jié)點(diǎn)方法來(lái)實(shí)現(xiàn)完全跨域的通信。使用這種原理的跨域方式有以下幾種：

動(dòng)態(tài)創(chuàng)建script

例如我要從域A的頁(yè)面pageA加載域B的數(shù)據(jù)，那么在域B的頁(yè)面pageB中我以JavaScript的形式聲明pageA需要的數(shù)據(jù)，然后在 pageA中用script標(biāo)簽把pageB加載進(jìn)來(lái)，那么pageB中的腳本就會(huì)得以執(zhí)行。

pageA(www.jack.com/index.html)代碼如下：

function getData(data){
  //這里是對(duì)獲取的數(shù)據(jù)的相關(guān)操作
  console.log(data);
  //數(shù)據(jù)獲取到后移除創(chuàng)建的script標(biāo)簽
  document.body.removeChild(originData);
}
var originData = document.createElement('script');
originData.src = 'http://www.jesse.com/data.js';
originData.setAttribute("type", "text/javascript");
document.body.appendChild(originData);

pageB(www.jesse.com/data.js)代碼如下：

getData('這里是遠(yuǎn)程跨域獲取的數(shù)據(jù)');//數(shù)據(jù)格式可以自定義，如json、字符串

jsonp

在用$.ajax()獲取遠(yuǎn)程數(shù)據(jù)時(shí)，如果是跨域資源則可以使用jsonp方法，以前一直以為jsonp是ajax的一種，后來(lái)才明白他們根本就不是一回事。ajax是以xhr方式請(qǐng)求數(shù)據(jù)的，而jsonp是以script方式請(qǐng)求數(shù)據(jù)的，這個(gè)就是和上面的動(dòng)態(tài)創(chuàng)建script方式一樣。

pageA(www.jack.com/index.html)代碼如下：

$.ajax({
  //JSONP不支持POST方式
  type:"GET",
  url:"http://www.jesse.com/data.php",
  dataType:"jsonp",
  //自定義的jsonp回調(diào)函數(shù)名稱，默認(rèn)為jQuery自動(dòng)生成的隨機(jī)函數(shù)名，也可以寫"?"，jQuery會(huì)自動(dòng)為你處理數(shù)據(jù)
  jsonpCallback:"getData",
  success: function(data){
    console.log(data);
  },
  error: function(){
    console.log('fail');
  }
})

pageB(www.jesse.com/data.js)代碼如下：

<?php
  $callback = $_GET['callback'];//得到回調(diào)函數(shù)名,這里是getData
  $data = array('a','b','c');//要返回的數(shù)據(jù)
  echo $callback.'('.json_encode($data).')';//輸出
?>

3.document.domain

對(duì)于主域相同而子域不同的例子，可以通過設(shè)置document.domain的辦法來(lái)解決。 具體的做法是可以在http://www.a.com/a.html和http://script.a.com/b.html兩個(gè)文件中分別加上 document.domain = "a.com"；然后通過a.html文件中創(chuàng)建一個(gè)iframe，去控制iframe的contentDocument，這樣兩個(gè)js文件之間就可以 “交互”了。當(dāng)然這種辦法只能解決主域相同而二級(jí)域名不同的情況

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("h2")[0].childNodes[0].nodeValue);
};

script.a.com上的b.html

document.domain = 'a.com';

4.跨域資源共享（CORS）

原理:跨源資源共享(CORS)定義一種跨域訪問的機(jī)制，可以讓AJAX實(shí)現(xiàn)跨域訪問。CORS允許一個(gè)域上的網(wǎng)絡(luò)應(yīng)用向另一個(gè)域提交跨域AJAX請(qǐng)求。實(shí)現(xiàn)此功能非常簡(jiǎn)單，只需由服務(wù)器發(fā)送一個(gè)響應(yīng)標(biāo)頭即可。它是通過客戶端+服務(wù)端協(xié)作聲明的方式來(lái)確保請(qǐng)求安全的。服務(wù)端會(huì)在HTTP請(qǐng)求頭中增加一系列HTTP請(qǐng)求參數(shù)(例如Access-Control-Allow-Origin等)，來(lái)限制哪些域的請(qǐng)求和哪些請(qǐng)求類型可以接受，而客戶端在發(fā)起請(qǐng)求時(shí)必須聲明自己的源(Orgin)，否則服務(wù)器將不予處理，如果客戶端不作聲明，請(qǐng)求甚至?xí)粸g覽器直接攔截都到不了服務(wù)端。服務(wù)端收到HTTP請(qǐng)求后會(huì)進(jìn)行域的比較，只有同域的請(qǐng)求才會(huì)處理。

pageA(www.jack.com/index.html)代碼如下：

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
  if(xhr.readyState === 4 && xhr.status === 200){
    console.log(xhr.responseText);
  }
};
xhr.open("get","http://www.jesse.com/data.php");
xhr.send(null);

pageB(www.jesse.com/data.php)代碼如下：

<?php
  header("Access-Control-Allow-Origin: http://www.jack.com");//與簡(jiǎn)單的請(qǐng)求相同
  header("Access-Control-Allow-Methods: GET, POST");//允許請(qǐng)求的方法
  header("Access-Control-Max-Age: 3628800"); //將這個(gè)請(qǐng)求緩存多長(zhǎng)時(shí)間
  $data = array('a','b','c');//要返回的數(shù)據(jù)
  echo json_encode($data);//輸出
?>

5.window.postMesage 不常用

window.postMessage(message,targetOrigin) 方法是html5新引進(jìn)的特性，可以使用它來(lái)向其它的window對(duì)象發(fā)送消息，無(wú)論這個(gè)window對(duì)象是屬于同源或不同源，目前IE8+、FireFox、Chrome、Opera等瀏覽器都已經(jīng)支持window.postMessage方法。

pageA(www.jack.com/index.html)代碼如下：

<iframe id="proxy" src="http://www.jesse.com/index.html" onload="postMsg()" ></iframe>
<script type="text/javascript">
var obj = {
  msg: 'hello world'
}

function postMsg() {
  var iframe = document.getElementById('proxy');
  var win = iframe.contentWindow;
  win.postMessage(obj, 'http://www.jesse.com');
}
</script>

pageB(www.jesse.com/data.php)代碼如下：
<script type="text/javascript">
window.onmessage = function(e) {
  console.log(e.data.msg + " from " + e.origin);
}
</script>

6. location.hash 不常用

pageA(www.jack.com/index.html)代碼如下：

function startRequest() {
  var ifr = document.createElement('iframe');
  ifr.style.display = 'none';
  ifr.src = 'http://www.jesse.com/b.html#sayHi'; //傳遞的location.hash 
  document.body.appendChild(ifr);
}

function checkHash() {
  try {
    var data = location.hash ? location.hash.substring(1) : '';
    if (console.log) {
      console.log('Now the data is ' + data);
    }
  } catch (e) {};
}
setInterval(checkHash, 5000);
window.onload = startRequest;

pageA(www.jack.com/proxy.html)代碼如下：

parent.parent.location.hash = self.location.hash.substring(1);

pageB(www.jesse.com/b.html)代碼如下：

function checkHash() {
  var data = '';
  //模擬一個(gè)簡(jiǎn)單的參數(shù)處理操作
  switch (location.hash) {
    case '#sayHello':
      data = 'HelloWorld';
      break;
    case '#sayHi':
      data = 'HiWorld';
      break;
    default:
      break;
  }
  data && callBack('#' + data);
}

function callBack(hash) {
  // ie、chrome的安全機(jī)制無(wú)法修改parent.location.hash，所以要利用一個(gè)中間的www.a.com域下的代理iframe
  var proxy = document.createElement('iframe');
  proxy.style.display = 'none';
  proxy.src = 'http://www.jack/c.html' + hash; // 注意該文件在"www.jack.com"域下
  document.body.appendChild(proxy);
}
window.onload = checkHash;

關(guān)于“Javascript中跨域方式有哪些”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。