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

在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> 
         

 

原文地址: http://www.cnblogs.com/xumingxiang/archive/2012/11/25/2787530.html

作者 : 祥叔
出處： http://www.cnblogs.com/xumingxiang 
版權：本文版權歸作者和博客園共有
轉載：歡迎轉載，為了保存作者的創作熱情，請按要求【轉載】，謝謝
要求：未經作者同意，必須保留此段聲明；必須在文章中給出原文連接；否則必究法律責任