您當前位置：首頁 > web前端 > jscript > 用document.domain+iframe實現Ajax跨子域

用document.domain+iframe實現Ajax跨子域

來源：程序員人生發布時間：2014-03-17 03:48:01 閱讀次數：2672次

Ajax跨域一直是個比較麻煩的問題，例如：斷橋殘雪在一個項目中使用了open打開一個跟父窗口不同域名的新頁面，結果子窗口就不能傳值給父窗口了;再如：我在www.2fool.cn下不可以獲取love.2fool.cn域名下的頁面內容。瀏覽器的跨域限制是為了安全，可是當我們想要在一個域名下請求另外一個域名的內容的時候就感覺不那么爽了。

我在WordPress天氣插件、滔滔API接口處理上都使用了JSONP的方法來實現的跨域。而今天我要通過使用JS的document.domain和iframe來解決Ajax跨子域的問題。

原理

通過給主頁面跟請求頁面設置相同的document.domain來，欺騙瀏覽器，達到Ajax跨子域的效果，此方法在IE，chrome，Firefox，Safari，Opera下測試通過。

缺點：無法實現不同主域名之間的通訊。并且當在一個頁面中還包含有其它的iframe時，會產生安全性異常，拒絕訪問。

使用document.domain+iframe跨域實例

首先我們假設主頁面地址為：http://www.js8.in/mywork/crossdomain/index.html，我們要加載的內容是位于work.2fool.cn域名下的helloworld.txt。我們需要在主頁面中設置document.domain為2fool.cn，然后主頁面添加一個iframe，src為域名work.2fool.cn下的一個url，在iframe頁面中同樣設置document.domain為2fool.cn，同時iframe中需要添加Ajax的函數，例如引入jQuery.js。

主頁index.html的主要代碼如下：

<button onclick="crossDomain();">開始跨域</button>
<div id="ajax"></div>
<iframe src="http://work.2fool.cn/crossdomain/iframe.html" id="iframe" style="display:none;">
</iframe>
<script type="text/javascript">
document.domain = '2fool.cn';
function crossDomain(){
var iframe=document.getElementById('iframe').contentWindow.$;
iframe.get("http://work.2fool.cn/crossdomain/helloworld.txt",function(data){
document.getElementById("ajax").innerHTML=data;
});
}
</script>

iframe頁面主要代碼如下：

演示Demo：點擊查看，演示下載

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生

------分隔線----------------------------

上一篇 淺談網站推廣的六種有效的方法

下一篇 Google Map API教程之如何自動縮放級別

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關注

欄目熱點

多多色-多人伦交性欧美在线观看-多人伦精品一区二区三区视频-多色视频-免费黄色视屏网站-免费黄色在线

用document.domain+iframe實現Ajax跨子域