DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> js實現跨域訪問的三種方法
js實現跨域訪問的三種方法
編輯:關於JavaScript     

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實現跨域訪問的三種方法分先給大家,大家仔細研究學習,一定會有所收獲

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved