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>