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

        最近做项目经常使用jquery的load方法加载页面,但是发现使load方法会导致浏览器前进、后退失效,使用起来特别不方便。
        经过多方资料查询,最终决定用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

猜你喜欢

转载自wzhui19903004.iteye.com/blog/2304690