js實作跨域存取的三種方法_javascript技巧
- WBOY原創
- 2016-05-16 15:26:511653瀏覽
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實現跨域訪問的三種方法分先給大家，大家仔細研究學習，一定會有所收穫