经过多方资料查询,最终决定用jquery的jquery.ba-hashchange.js解决问题,其同通过实时监控浏览器hashchange实现浏览地址记录,关于hash的相关知识参见最下边的链接。好了过程不多说,直接上代码。
一、项目中引用jquery.ba-hashchange.js
<!-- 解决上一步下一步问题 --> <script type="text/javascript" src="resource/component/jquery/jquery.ba-hashchange.js"></script>
二、页面加载时初始化(公共方法)
$(function(){ $(window).hashchange( function(){ var hash=location.hash; if(hash!=null&&hash!=""&&hash!="undefined"){ url=hash.substring(1); loadActivePageByHash(url); //调用load方法,执行前进 后退 }else{ initFirstPage(); //初始化首页面 } }) $(window).hashchange(); //手动执行调用hash变化方法 });
三、监控hash改变,调用load方法
//hash发生变化时调用的load方法 function loadActivePageByHash(url,backFun){ $('#pageContainer').load(url,{},function(response,status,xhr){ if(backFun && typeof backFun=="function")backFun(response,status,xhr); }); }
四、需要load界面时只需重置hash即可(因为对hash进行监控,会自动调用load)
//改变hash的公共方法 function loadActivePage(url,backFun){ location.hash="#"+url;//重置浏览器hash $(window).hashchange();//手动执行hash重置方法,解决重复点击同一个导航条hash未变化,不刷新界面问题 if(backFun && typeof backFun=="function")backFun(); }
浏览器HASH相关知识参见博客 : http://justcoding.iteye.com/blog/2219340