js實(shí)現(xiàn)跨域訪問的三種方法

更新時(shí)間：2015年12月09日 09:53:20 作者：lwaif

這篇文章主要介紹了js實(shí)現(xiàn)跨域訪問的三種方法，包括基于iframe實(shí)現(xiàn)跨域、基于script標(biāo)簽實(shí)現(xiàn)跨域以及后臺(tái)代理方式，感興趣的小伙伴們可以參考一下

javascript跨域訪問是web開發(fā)者經(jīng)常遇到的問題，什么是跨域，一個(gè)域上加載的腳本獲取或操作另一個(gè)域上的文檔屬性，下面將列出三種實(shí)現(xiàn)javascript跨域方法:
1.基于iframe實(shí)現(xiàn)跨域
基于iframe實(shí)現(xiàn)的跨域要求兩個(gè)域具有aa.xx.com,bb.xx.com這種特點(diǎn)，也就是兩個(gè)頁(yè)面必須屬于一個(gè)基礎(chǔ)域（例如都是xxx.com，或是xxx.com.cn），使用同一協(xié)議（例如都是 http）和同一端口（例如都是80），這樣在兩個(gè)頁(yè)面中同時(shí)添加document.domain，就可以實(shí)現(xiàn)父頁(yè)面調(diào)用子頁(yè)面的函數(shù)，代碼如下：
頁(yè)面一：

<html> 
<head> 
 <script> 
  document.domain = "xx.com"; 
  function aa(){ 
   alert("p"); 
  } 
 </script> 
</head> 
<body> 
  <iframe src="http://localhost:8080/CmsUI/2.html" id="i"> 
   
  </iframe> 
  <script> 
 document.getElementById('i').onload = function(){ 
   var d = document.getElementById('i').contentWindow; 
   d.a(); 
    
 }; 
  </script> 
 </body> 
</html>

頁(yè)面二：

<html> 
 <head> 
 <script> 
  document.domain = "xx.com"; 
  function a(){ 
  alert("c"); 
   } 
 </script> 
 </head> 
 <body> 
 </body> 
</html>

這時(shí)候父頁(yè)面就可以調(diào)用子頁(yè)面的a函數(shù)，實(shí)現(xiàn)js跨域訪問
2.基于script標(biāo)簽實(shí)現(xiàn)跨域
script標(biāo)簽本身就可以訪問其它域的資源，不受瀏覽器同源策略的限制，可以通過在頁(yè)面動(dòng)態(tài)創(chuàng)建script標(biāo)簽，代碼如下：

var script = document.createElement('script'); 
script.src = "http://aa.xx.com/js/*.js"; 
document.body.appendChild(script);

這樣通過動(dòng)態(tài)創(chuàng)建script標(biāo)簽就可以加載其它域的js文件，然后通過本頁(yè)面就可以調(diào)用加載后js文件的函數(shù)，這樣做的缺陷就是不能加載其它域的文檔，只能是js文件，jsonp便是通過這種方式實(shí)現(xiàn)的，jsonp通過向其它域傳入一個(gè)callback參數(shù)，通過其他域的后臺(tái)將callback參數(shù)值和json串包裝成javascript函數(shù)返回，因?yàn)槭峭ㄟ^script標(biāo)簽發(fā)出的請(qǐng)求，瀏覽器會(huì)將返回來的字符串按照javascript進(jìn)行解析執(zhí)行，實(shí)現(xiàn)了域與域之間的數(shù)據(jù)傳輸。
jquery中對(duì)jsonp的支持也是基于此方案。
3.后臺(tái)代理方式
這種方式可以解決所有跨域問題，也就是將后臺(tái)作為代理，每次對(duì)其它域的請(qǐng)求轉(zhuǎn)交給本域的后臺(tái)，本域的后臺(tái)通過模擬http請(qǐng)求去訪問其它域，再將返回的結(jié)果返回給前臺(tái)，這樣做的好處是，無論訪問的是文檔，還是js文件都可以實(shí)現(xiàn)跨域。

以上js實(shí)現(xiàn)跨域訪問的三種方法分先給大家，大家仔細(xì)研究學(xué)習(xí)，一定會(huì)有所收獲

您可能感興趣的文章: