[轉] 三種方法實現js跨域訪問


1.基於iframe實現跨域 

     基於iframe實現的跨域要求兩個域具有aa.xx.com,bb.xx.com這種特點,也就是兩個頁面必須屬於一個基礎域(例如都是xxx.com,或是xxx.com.cn),使用同一協議(例如都是 http)和同一端口(例如都是80),這樣在兩個頁面中同時添加document.domain,就可以實現父頁面調用子頁面的函數,代碼如下: 
頁面一:  

Html代碼    收藏代碼
  1. <html>  
  2. <head>  
  3.   <script>  
  4.    document.domain = "xx.com";  
  5.     function a(){  
  6.       alert("p");  
  7.    }  
  8.   </script>  
  9. </head>  
  10. <body>  
  11.    <iframe src="http://localhost:8080/CmsUI/2.html" id="i">  
  12.      
  13.    </iframe>  
  14.    <script>  
  15.   document.getElementById('i').onload = function(){  
  16.      var d = document.getElementById('i').contentWindow;  
  17.      d.aa();  
  18.        
  19.  };  
  20.    </script>  
  21.  </body>  
  22. </html>  


頁面二:  

Html代碼    收藏代碼
  1. <html>  
  2.  <head>  
  3.   <script>  
  4.     document.domain = "xx.com";  
  5.     function aa(){  
  6.     alert("c");  
  7.      }  
  8.   </script>  
  9.  </head>  
  10.  <body>  
  11.  </body>  
  12. </html>  


這時候父頁面就可以調用子頁面的aa函數,實現js跨域訪問 

2.基於script標簽實現跨域 

     script標簽本身就可以訪問其它域的資源,不受瀏覽器同源策略的限制,可以通過在頁面動態創建script標簽,代碼如下: 

Java代碼    收藏代碼
  1. var script = document.createElement('script');  
  2. script.src = "http://aa.xx.com/js/*.js";  
  3. document.body.appendChild(script);  


      這樣通過動態創建script標簽就可以加載其它域的js文件,然后通過本頁面就可以調用加載后js文件的函數,這樣做的缺陷就是不能加載其它域的文檔,只能是js文件,jsonp便是通過這種方式實現的,jsonp通過向其它域傳入一個callback參數,通過其他域的后台將callback參數值和json串包裝成javascript函數返回,因為是通過script標簽發出的請求,瀏覽器會將返回來的字符串按照javascript進行解析執行,實現了域與域之間的數據傳輸。 
jquery中對jsonp的支持也是基於此方案。 

3.后台代理方式 

     這種方式可以解決所有跨域問題,也就是將后台作為代理,每次對其它域的請求轉交給本域的后台,本域的后台通過模擬http請求去訪問其它域,再將返回的結果返回給前台,這樣做的好處是,無論訪問的是文檔,還是js文件都可以實現跨域。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM