`

解决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
0
0
分享到:
评论

相关推荐

    如何让浏览器支持jquery ajax load 前进、后退功能

    本例将介绍如何在使用jQuery进行AJAX内容加载时,让浏览器的前进和后退按钮能够正常使用。 首先需要了解的是,在传统页面跳转中,浏览器会保存浏览历史记录,用户可以通过前进或后退按钮返回到先前访问的页面。当...

    jquery判断360浏览器

    本话题聚焦于“jquery判断360浏览器”,这是一个常见的需求,因为不同的浏览器可能会有不同的行为,开发者需要针对特定浏览器进行优化或提供兼容性解决方案。 首先,我们来探讨如何使用jQuery来检测用户是否正在...

    JQuery鉴别各种浏览器以及版本

    但是,我们仍然可以使用`navigator.userAgent`属性来获取浏览器发送的UserAgent字符串,然后通过正则表达式或字符串方法来识别浏览器类型和版本。 ```javascript var userAgent = navigator.userAgent; if ...

    laroux.js, 微型jquery替代现代浏览器.zip

    laroux.js, 微型jquery替代现代浏览器 laroux.js 这个项目插件是一个用于现代浏览器和移动设备的jQuery替代品。 它不是提供一些包装器和自己的动态,而是提供 helper 函数来实现与jQuery或者Zepto相同的目标。尽管...

    jquery 调用浏览器打印功能

    而“jQuery 调用浏览器打印功能”是利用 jQuery 实现的一种方法,允许用户通过点击按钮或执行特定操作来触发浏览器的打印功能,从而打印网页内容。在描述中提到了 jqPrint 插件,这是一个专门用于打印 jQuery 对象...

    对ajax前进后退的处理

    通过以上方法,我们可以使AJAX应用支持浏览器的前进后退功能,确保用户在浏览历史中能够顺畅地导航。在实际项目中,还可以考虑使用jQuery的插件,如`History.js`或`jQuery BBQ`,它们提供了更完善的`hash`管理和历史...

    jquery 兼容所有浏览器的浮动div位置控制+例子

    jquery 兼容所有浏览器的浮动div位置控制+例子 jquery 兼容所有浏览器的浮动div位置控制+例子 jquery 兼容所有浏览器的浮动div位置控制+例子 jquery 兼容所有浏览器的浮动div位置控制+例子 jquery 兼容所有浏览器的...

    jquery1.9判断浏览器类型和版本

    尽管这种方法可以满足大部分需求,但请注意,浏览器检测并不是一个完美的解决方案,因为userAgent字符串可以被用户篡改,而且不同的浏览器可能会有细微的差异。因此,尽可能地依赖于特性检测和渐进增强的策略,而...

    使用jQuery的load方法设计动态加载及解决被加载页面js失效问题

    【jQuery的load方法】 ...总的来说,通过正确使用jQuery的load方法,结合适当的策略处理JavaScript加载,我们可以有效地构建动态后台系统,提供流畅的用户体验,同时避免因页面动态加载导致的JavaScript失效问题。

    JQuery Lazyload加载图片实例

    jQuery Lazyload 的核心思想是利用事件监听用户的滚动行为,当图片进入浏览器的可视区域时,才去请求图片资源。这种机制可以减少初次加载页面时对网络带宽的需求,提高页面加载效率。 ### 2. 安装与引入 首先,你...

    jQuery图片浏览器源码

    jQuery图片浏览器源码是一种基于流行的JavaScript库jQuery开发的图片查看工具。它允许用户在网页上以优雅的方式浏览图片集,通常具有幻灯片展示、缩放、导航箭头以及全屏模式等功能。以下是对这个主题的详细解释: ...

    jQuery浏览器导航栏

    9. **跨浏览器兼容性**:虽然jQuery致力于解决浏览器之间的差异,但在实际应用中,开发者仍需关注IE、Chrome、Firefox等主流浏览器下的表现,确保导航栏在各浏览器上的兼容性。 10. **性能优化**:合理使用事件委托...

    js禁止浏览器页面后退功能的实例(推荐)

    2. `history.pushState(null, null, document.URL)`: 第一次调用`pushState`方法,将当前URL添加到历史记录栈,这样即使用户点击后退按钮,浏览器也不会回到之前的URL。 3. `window.addEventListener('popstate', ...

    jquery-load-demo

    《jQuery Load方法详解及其在网页动态加载中的应用》 在Web开发中,jQuery库以其简洁易用的API和强大的功能,成为了JavaScript开发者的首选工具之一。"jquery-load-demo"这个项目,显然着重展示了jQuery的load()...

    Jquery实现浏览器嗅探器特效

    本教程将详细讲解如何利用jQuery实现一个浏览器嗅探器特效,帮助开发者识别用户正在使用的浏览器类型、内核版本以及设备的基础信息。 首先,要实现浏览器嗅探器,我们需要理解jQuery中的`navigator`对象。这个对象...

    JQuery LazyLoad 图片懒加载实例

    - 检查浏览器兼容性:虽然jQuery LazyLoad支持大部分现代浏览器,但在一些旧版本或非主流浏览器中可能存在问题。 - 调试:在开发过程中,可以禁用懒加载以便快速预览所有图片。可以通过移除`lazyload`类或临时修改...

    jQuery仿360浏览器导航栏.zip

    【jQuery仿360浏览器导航栏】是一种网页设计技术,主要使用JavaScript库jQuery来实现类似360浏览器的导航栏效果。这个效果通常包括动态滚动、下拉菜单、平滑过渡以及自定义图标等特性,使得网站的头部导航更加吸引...

    jquery lazyload延时加载

    jQuery 的 LazyLoad 插件提供了一种高效的方法来处理这个问题,特别是对于那些图片众多、流量消耗大的网站而言。jQuery LazyLoad 实现了图片的延时加载(也称为懒加载),即只有当图片进入用户可视区域时,才会开始...

    jquery.lazyload图片预加载效果 jquery预加载

    为了解决这一问题,开发者们引入了图片预加载技术,其中jQuery LazyLoad是广泛应用的一种解决方案。 jQuery LazyLoad 是一个jQuery插件,它的主要功能是在用户滚动页面到图片所在位置时才开始加载图片,而不是在...

    jQuery load方法用法集锦

    默认情况下,jQuery的AJAX请求包括`load`方法,可能会被浏览器缓存,导致无法获取最新的数据。可以通过设置全局的`ajaxSetup`来关闭缓存: ```javascript $.ajaxSetup({ cache: false }); ``` 此外,还有其他几种...

Global site tag (gtag.js) - Google Analytics