在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事件,使其能夠兼容全部瀏覽器。
使用如下: