AJAX保留瀏覽歷史的解決方案——hashchange()


在ajax請求中,不能更新地址欄,地址欄上的“前進”和“后退”按鈕就失效了,帶來了另外一種糟糕的用戶體驗。

解決方案如下:

方案一:使用window. Onhashchange 事件

如下面Html片段,點擊不同的連接,在mainPanel中加載不同的頁面:

首先寫一個方法來獲取當前url中指定key的hash值,如下:

 
        

使用onhashchange事件觸發ajax請求:

 
        

到這里工作已經完成了80%,為什么是80%呢,這里面還有一個問題:

當你直接在瀏覽器(新開的標簽頁)的地址欄里輸入這樣的地址:http://localhost:3859/home/index#page=3 或者通過QQ發給你的好友,看到的並不是如你所想的應該是page=3的內容,而是http://localhost:3859/home/index 的內容。原因很簡單——頁面加載的時候不會觸發onhashchange事件。

所以我們要在上面的代碼追加一行:

$(loadPanel);
//或者    
$(function(){ $(window).trigger("hashchange"); });

onhashchange 事件location.hash發生改變的時候觸發,可以很好解決AJAX刷新后退/前進鍵失效的問題,是一個新的事件,

目前chrome ,firefox,Opera,  Safari,IE8及以上版本瀏覽器都兼容。

其實對於那些死抱着IE6,IE7 不放的用戶,咱也沒必要給他們提供這樣的用戶體驗。

 

方案二:使用jQuery.History.js

對於要兼容IE6、IE7的情況,筆者一直使用jquery.history.js 這個插件(https://github.com/tkyk/jquery-history-plugin)。

這個插件它會去判斷瀏覽器是否支持onhashchange事件,如果不支持,就定時(每個100毫秒)循環判斷hash有沒有變化,從而執行相應處理。

如:

 
        

另外,這個插件已經不再繼續更新維護了。

 

方案三:jquery.ba-hashchange.js

jquery.ba-hashchange.js(http://benalman.com/projects/jquery-hashchange-plugin/)

這個插件的實現原理和jquery.history.js 完全一樣。循環間隔為50毫秒。

它overwrite 了window.hashchange事件,使其能夠兼容全部瀏覽器。

使用如下:


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM