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值,如下:
<scripttype="text/javascript">
// 获取指定key的hash值 functiongetHash(key,url){ varhash; if(!!url){ hash=url.replace(/^.*?[#](.+?)(?:?.+)?$/,"$1"); hash=(hash==url)?"":hash; } else{ hash=self.location.hash; } hash=""+hash; hash=hash.replace(/^[?#]/,''); hash="&"+hash; varval=hash.match( newRegExp("[&;]"+key+"=([^&;]+)","i")); if(val== null||val.length<1){ return null; } else{ returndecodeURIComponent(val[1]); } } </script> 使用onhashchange事件触发ajax请求:
<scripttype="text/javascript">
functionloadPanel(){ varpage=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有没有变化,从而执行相应处理。 如:
<scriptsrc="/Scripts/jquery.history.js"type="text/javascript"></script>
<scripttype="text/javascript"> $( function(){ $.history.init( function(hash){ varpage=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事件,使其能够兼容全部浏览器。 使用如下:
<scriptsrc="/Scripts/jquery.ba-hashchange.js"type="text/javascript"></script>
<scripttype="text/javascript"> $(window).hashchange( function(){ varpage=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> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |