首頁 > web前端 > js教程 > js實作跨域存取的三種方法_javascript技巧

js實作跨域存取的三種方法_javascript技巧

WBOY
發布: 2016-05-16 15:26:51
原創
1714 人瀏覽過

javascript跨域存取是web開發者經常遇到的問題,什麼是跨域,一個域上載入的腳本獲取或操作另一個域上的文檔屬性,下面將列出三種實作javascript跨域方法:
1.基於iframe實作跨域
基於iframe實現的跨域要求兩個域具有aa.xx.com,bb.xx.com這種特點,也就是兩個頁面必須屬於一個基礎域(例如都是xxx.com,或是xxx .com.cn),使用相同協定(例如都是http)和相同連接埠(例如都是80),這樣在兩個頁面中同時加入document.domain,就可以實作父頁面呼叫子頁面的函數,程式碼如下:
頁面一: 

<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> 
登入後複製

頁二: 

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

這時候父頁就可以呼叫子頁面的a函數,實作js跨域存取
2.基於script標籤實作跨域
script標籤本身就可以存取其它網域的資源,不受瀏覽器同源策略的限制,可以透過在頁面動態建立script標籤,程式碼如下:

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

這樣透過動態建立script標籤就可以載入其它域的js文件,然後透過本頁面就可以呼叫載入後js文件的函數,這樣做的缺陷就是不能載入其它域的文檔,只能是js文件, jsonp便是透過這種方式實現的,jsonp透過向其它域傳入一個callback參數,透過其他域的後台將callback參數值和json串包裝成javascript函數返回,因為是透過script標籤發出的請求,瀏覽器會將傳回的字串依照javascript進行解析執行,實現了域與域之間的資料傳輸。
jquery中對jsonp的支援也是基於此方案。
3.後台代理方式
這種方式可以解決所有跨域問題,也就是將後台作為代理,每次對其它域的請求轉交給本域的後台,本域的後台通過模擬http請求去訪問其它域,再將返回的結果返回給前台,這樣做的好處是,無論訪問的是文檔,還是js文件都可以實現跨域。

以上js實現跨域訪問的三種方法分先給大家,大家仔細研究學習,一定會有所收穫

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板