Ajax保留瀏覽器歷史的解決方案

解決方案以下：

方案一：使用window. Onhashchange 事件

以下面Html片斷，點擊不一樣的鏈接，在mainPanel中加載不一樣的頁面：

< ul  class ="menu" >
< li >< a  href ="/home/index#page=1" >page1 </ a ></ li >
< li >< a  href ="/home/index#page=2" >page2 </ a ></ li >
< li >< a  href ="/home/index#page=3" >page3 </ a ></ li >
</ ul >

< div  id ="mainPanel" >
</ div >

首先寫一個方法來獲取當前url中指定key的hash值，以下：

<script type="text/javascript">
       // 獲取指定key的hash值
       function getHash(key, url) {
           var hash;
           if (!!url) {
              hash = url.replace(/^.*?[#](.+?)(?:\?.+)?$/, "$1");
              hash = (hash == url) ? "" : hash;
          }  else {
              hash = self.location.hash;
          }

          hash = "" + hash;
          hash = hash.replace(/^[?#]/, '');
          hash = "&" + hash;
           var val = hash.match( new RegExp("[\&]" + key + "=([^\&]+)", "i"));
           if (val ==  null || val.length < 1) {
               return  null;
          }  else {
               return decodeURIComponent(val[1]);
          }
      }
  </script>

使用onhashchange事件觸發ajax請求：

<script type="text/javascript">
        function loadPanel() {
         var page = getHash("page");
         if (page == 1) {
            $("#mainPanel").load("/home/page1");
        }
         if (page == 2) {
            $("#mainPanel").load("/home/page2");
        }
         if (page == 3) {
            $("#mainPanel").load("/home/page3");
        }
    }
    $(window).bind("hashchange", loadPanel);
 </script>

到這裏工做已經完成了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有沒有變化，從而執行相應處理。

如：

<script src="/Scripts/jquery.history.js" type="text/javascript"></script>
<script type="text/javascript">
    $( function () {
        $.history.init( function (hash) {
             var page = getHash("page");
             if (page == 1) {
                $("#mainPanel").load("/home/page1");
            }
             if (page == 2) {
                $("#mainPanel").load("/home/page2");
            }
             if (page == 3) {
                $("#mainPanel").load("/home/page3");
            }
        });
    });
</script>

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

 

方案三：jquery.ba-hashchange.js

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

這個插件的實現原理和jquery.history.js 徹底同樣。循環間隔爲50毫秒。

它overwrite 了window.hashchange事件，使其可以兼容所有瀏覽器。

使用以下：

<script src="/Scripts/jquery.ba-hashchange.js" type="text/javascript"></script>
<script type="text/javascript">
    $(window).hashchange( function () {
         var page = getHash("page");
         if (page == 1) {
            $("#mainPanel").load("/home/page1");
        }
         if (page == 2) {
            $("#mainPanel").load("/home/page2");
        }
         if (page == 3) {
            $("#mainPanel").load("/home/page3");
        }
    });
    $(window).hashchange();
</script>