解决方案如下：
方案一：使用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 不放的用户，咱也没必要给他们提供这样的用户体验。
方案二：使用jQuery.History.js
对于要兼容IE6、IE7的情况，笔者一直使用jquery.history.js 这个插件（）。
这个插件它会去判断浏览器是否支持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()
这个插件的实现原理和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>
