用document.domain+iframe實(shí)現(xiàn)Ajax跨子域

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

我在WordPress天氣插件、滔滔API接口處理上都使用了JSONP的方法來(lái)實(shí)現(xiàn)的跨域。而今天我要通過(guò)使用JS的document.domain和iframe來(lái)解決Ajax跨子域的問(wèn)題。

原理

通過(guò)給主頁(yè)面跟請(qǐng)求頁(yè)面設(shè)置相同的document.domain來(lái)，欺騙瀏覽器，達(dá)到Ajax跨子域的效果，此方法在IE，chrome，F(xiàn)irefox，Safari，Opera下測(cè)試通過(guò)。

缺點(diǎn)：無(wú)法實(shí)現(xiàn)不同主域名之間的通訊。并且當(dāng)在一個(gè)頁(yè)面中還包含有其它的iframe時(shí)，會(huì)產(chǎn)生安全性異常，拒絕訪問(wèn)。

使用document.domain+iframe跨域?qū)嵗?/p>

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

主頁(yè)index.html的主要代碼如下：

iframe頁(yè)面主要代碼如下：

演示Demo：點(diǎn)擊查看，演示下載

生活不易，碼農(nóng)辛苦
如果您覺(jué)得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)