Ajax保留浏览器历史的解决方案

关于jQuery的历史 jQuery history plugin helps you to support back/forward
buttons and bookmarks in your javascript
applications.历史的jQuery插件可以帮助您回到您的JavaScript支持应用程序/前进按钮和书签。
You can store the application state into URL hash and restore the state
from it.你可以存储到应用程序状态的网址散列和恢复它的状态。 Download
jquery.history.js 下载jquery.history.js jQuery history plugin is hosted
on Github. 历史的jQuery插件托管在Github上。 Please visit the project
page for development. 请访问项目页面进行开发。 Supported
browsers支持的浏览器 Internet Explorer 6, 7, and 8+的Internet Explorer
6,7和8 + Safari 4 and 5+的 Safari 4和5 + Google Chrome 4+ 谷歌浏览器4 +
This plugin is built on hashchange event , which is defined in HTML5 and
supported in most modern browsers. Unless it is supported the plugin
works on some fallback mechanisms:这个插件是在建hashchange事件
,这是定义在浏览器支持HTML5和最现代化的机制。除非是支持一些后备插件工程:
monitoring location.hash by setInterval 监测的setInterval location.hash
iframe and setInterval (IE 6, 7, and compatibility mode on IE8)
iframe的和setInterval Known issues 已知问题 IE6, 7, and IE8
compatibility mode 在IE6,7和IE8的兼容模式 Back/forward button will not
work if you refresh the page and the document is reloaded.
后退/前进按钮将不会工作,如果你刷新页面,该文件重新加载。 IE8 standards
mode IE8的标准模式 The current hash will not be recorded in the history
if you update the URL hash by hand or loading bookmarks.
目前哈希将不会被记录在历史上,如果你用手或加载更新书签网址哈希。 Demos
Some demos are available here and included in the repository. And this
site itself is built on the plugin: 复制代码 代码如下: { var origContent = “”;
function loadContent { if { if { origContent = $; } $.load(hash
+”.html”, function; } else if { $.html; } } $.ready { $.history.init;
$.click { var url = $; url = url.replace; $.history.load; return false;
}); }); }); 打包下载

在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%呢,这里面还有一个问题:

当你直接在浏览器(新开的标签页)的地址栏里输入这样的地址:
或者通过QQ发给你的好友,看到的并不是如你所想的应该是page=3的内容,而是
的内容。原因很简单——页面加载的时候不会触发onhashchange事件。

所以我们要在上面的代码追加一行:

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

onhashchange
事件location.hash发生改变的时候触发,可以很好解决AJAX刷新后退/前进键失效的问题,是一个新的事件,

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

其实对于那些死抱着IE6,IE7
不放的用户,咱也没必要给他们提供这样的用户体验。