JS跨域訪問

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

JS跨子域訪問

對於JS跨子域訪問,解決方案較爲簡單,只要把各子域頁面的JS裏面統一加上document.domain = “xxx.com”即可。
其中的xxx.com是你的主域名

JS跨主域訪問

這個就有點難度了,灰太狼前不久解決的就是這個問題,網上的解決方案有的簡單,有的複雜,看了好些,發現都有點問題,要不就是有瀏覽器兼容性,要不就是根本不可用,不知道是不是系統環境造成的,功夫不負有心人,找到一個SOHU哥們的技術貼,幫我解決了問題,下面就跟大家既簡單有詳細的分享一下!
首先,介紹下我遇到的具體問題:

  • 有一個頁面,叫它A吧,所在域爲x.y.com
  • 頁面A有一個子頁面B, 所在域爲a.b.com
  • 我需要子頁面B調用父頁面A裏面的一個JS方法

其實解決調用就解決了傳值,就是解決訪問問題,這點不明白的自己想 :(
因爲安全性的問題,Javascript不允許進行跨域的調用,其實本意是好的,但是我自己擁有或者說有權利訪問的兩個域也不允許,太限制我們的功能了!

然後,SOHU的哥們提出瞭解決方案:

  • 在頁面B中再創建一個子頁面C, 所在域爲x.y.com
  • 在頁面B中創建子頁面C時使用url#data方式把方法參數傳遞給頁面C
  • 頁面C通過document.location.hash獲取data數據,使用window.top.xxx或者window.parent.parent.xxx方式調用頁面A中的方法

JS跨域訪問示例圖
是不是很簡單啊,因爲頁面A和C頁面同屬於同一域,我們在沒有違反安全性的基礎上解決的JS跨域調用的問題。
其實有的時候碰到技術難題,一直悶頭去想細節,鑽到問題中,不一定能解決問題,反倒是跳出問題,從大方面上去想,最終倒出現瞭解決方案!

其實本例還可以進一步擴展一下!
比如: 頁面B的高度對於頁面A是未知的,那麼在加載時,爲了更好的控制整體顯示效果,頁面B把自己的高度傳遞給頁面C,而頁面C傳給頁面A,頁面A就可以做出適當的調整了!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章