解决jquery load 方法 浏览器前进 后退失效

博客分类： 前台技术

jquery浏览器前进后退load浏览记录 

        最近做项目经常使用jquery的load方法加载页面，但是发现使load方法会导致浏览器前进、后退失效，使用起来特别不方便。 

        经过多方资料查询，最终决定用jquery的jquery.ba-hashchange.js解决问题，其同通过实时监控浏览器hashchange实现浏览地址记录，关于hash的相关知识参见最下边的链接。好了过程不多说，直接上代码。 

一、项目中引用jquery.ba-hashchange.js 

Java代码  

<!-- 解决上一步下一步问题 -->  

script type="text/javascript" src="resource/component/jquery/jquery.ba-hashchange.js"></script>  

二、页面加载时初始化（公共方法） 

 

Java代码  

$(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方法 

    

Java代码  

//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） 

    

Java代码  

//改变hash的公共方法  

function loadActivePage(url,backFun){  

    location.hash="#"+url;//重置浏览器hash  

     $(window).hashchange();//手动执行hash重置方法，解决重复点击同一个导航条hash未变化，不刷新界面问题  

    if(backFun &&  typeof backFun=="function")backFun();  

}