JavaScript跨域訪問的解決方案(代碼)

2011-09-22 16:38:31來源:灰太狼的窩作者:

JS的跨域訪問一直是大家經(jīng)常遇到并且不好解決的問題,前不久灰太狼就碰巧處理過一次,在網(wǎng)上搜羅了各式各樣的解決方案,經(jīng)過不斷測試最終是成功了,現(xiàn)在灰太狼把經(jīng)驗分享給大家!

JS的跨域訪問一直是大家經(jīng)常遇到并且不好解決的問題,前不久灰太狼就碰巧處理過一次,在網(wǎng)上搜羅了各式各樣的解決方案,經(jīng)過不斷測試最終是成功了,現(xiàn)在灰太狼把經(jīng)驗分享給大家!

JS跨子域訪問

對于JS跨子域訪問,解決方案較為簡單,只要把各子域頁面的JS里面統(tǒng)一加上document.domain = “xxx.com”即可。其中的xxx.com是你的主域名

JS跨主域訪問

這個就有點難度了,灰太狼前不久解決的就是這個問題,網(wǎng)上的解決方案有的簡單,有的復(fù)雜,看了好些,發(fā)現(xiàn)都有點問題,要不就是有瀏覽器兼容性,要不就是根本不可用,不知道是不是系統(tǒng)環(huán)境造成的,功夫不負有心人,找到一個SOHU哥們的技術(shù)貼,幫我解決了問題,下面就跟大家既簡單有詳細的分享一下!

首先,介紹下我遇到的具體問題:

    * 有一個頁面,叫它A吧,所在域為x.y.com
    * 頁面A有一個子頁面B, 所在域為a.b.com
    * 我需要子頁面B調(diào)用父頁面A里面的一個JS方法

其實解決調(diào)用就解決了傳值,就是解決訪問問題,這點不明白的自己想 :(

因為安全性的問題,Javascript不允許進行跨域的調(diào)用,其實本意是好的,但是我自己擁有或者說有權(quán)利訪問的兩個域也不允許,太限制我們的功能了!

然后,SOHU的哥們提出了解決方案:

    * 在頁面B中再創(chuàng)建一個子頁面C, 所在域為x.y.com
    * 在頁面B中創(chuàng)建子頁面C時使用url#data方式把方法參數(shù)傳遞給頁面C
    * 頁面C通過document.location.hash獲取data數(shù)據(jù),使用window.top.xxx或者window.parent.parent.xxx方式調(diào)用頁面A中的方法

JS跨域訪問示例圖
JS跨域訪問示例圖

是不是很簡單啊,因為頁面A和C頁面同屬于同一域,我們在沒有違反安全性的基礎(chǔ)上解決的JS跨域調(diào)用的問題。

其實有的時候碰到技術(shù)難題,一直悶頭去想細節(jié),鉆到問題中,不一定能解決問題,反倒是跳出問題,從大方面上去想,最終倒出現(xiàn)了解決方案!

其實本例還可以進一步擴展一下!

比如: 頁面B的高度對于頁面A是未知的,那么在加載時,為了更好的控制整體顯示效果,頁面B把自己的高度傳遞給頁面C,而頁面C傳給頁面A,頁面A就可以做出適當(dāng)?shù)恼{(diào)整了!

原文:http://www.rockylife.com/2011/09/js-cross-domain/
關(guān)鍵詞:JavaScriptjs跨域

贊助商鏈接: