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

阅读更多

        最近做项目经常使用jquery的load方法加载页面，但是发现使load方法会导致浏览器前进、后退失效，使用起来特别不方便。
        经过多方资料查询，最终决定用jquery的jquery.ba-hashchange.js解决问题，其同通过实时监控浏览器hashchange实现浏览地址记录，关于hash的相关知识参见最下边的链接。好了过程不多说，直接上代码。
   一、项目中引用jquery.ba-hashchange.js

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

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

• jquery.ba-hashchange.rar (5.2 KB)
• 下载次数: 31