最近做项目经常使用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
分享到:
相关推荐
本例将介绍如何在使用jQuery进行AJAX内容加载时,让浏览器的前进和后退按钮能够正常使用。 首先需要了解的是,在传统页面跳转中,浏览器会保存浏览历史记录,用户可以通过前进或后退按钮返回到先前访问的页面。当...
本话题聚焦于“jquery判断360浏览器”,这是一个常见的需求,因为不同的浏览器可能会有不同的行为,开发者需要针对特定浏览器进行优化或提供兼容性解决方案。 首先,我们来探讨如何使用jQuery来检测用户是否正在...
但是,我们仍然可以使用`navigator.userAgent`属性来获取浏览器发送的UserAgent字符串,然后通过正则表达式或字符串方法来识别浏览器类型和版本。 ```javascript var userAgent = navigator.userAgent; if ...
laroux.js, 微型jquery替代现代浏览器 laroux.js 这个项目插件是一个用于现代浏览器和移动设备的jQuery替代品。 它不是提供一些包装器和自己的动态,而是提供 helper 函数来实现与jQuery或者Zepto相同的目标。尽管...
而“jQuery 调用浏览器打印功能”是利用 jQuery 实现的一种方法,允许用户通过点击按钮或执行特定操作来触发浏览器的打印功能,从而打印网页内容。在描述中提到了 jqPrint 插件,这是一个专门用于打印 jQuery 对象...
通过以上方法,我们可以使AJAX应用支持浏览器的前进后退功能,确保用户在浏览历史中能够顺畅地导航。在实际项目中,还可以考虑使用jQuery的插件,如`History.js`或`jQuery BBQ`,它们提供了更完善的`hash`管理和历史...
jquery 兼容所有浏览器的浮动div位置控制+例子 jquery 兼容所有浏览器的浮动div位置控制+例子 jquery 兼容所有浏览器的浮动div位置控制+例子 jquery 兼容所有浏览器的浮动div位置控制+例子 jquery 兼容所有浏览器的...
尽管这种方法可以满足大部分需求,但请注意,浏览器检测并不是一个完美的解决方案,因为userAgent字符串可以被用户篡改,而且不同的浏览器可能会有细微的差异。因此,尽可能地依赖于特性检测和渐进增强的策略,而...
【jQuery的load方法】 ...总的来说,通过正确使用jQuery的load方法,结合适当的策略处理JavaScript加载,我们可以有效地构建动态后台系统,提供流畅的用户体验,同时避免因页面动态加载导致的JavaScript失效问题。
jQuery Lazyload 的核心思想是利用事件监听用户的滚动行为,当图片进入浏览器的可视区域时,才去请求图片资源。这种机制可以减少初次加载页面时对网络带宽的需求,提高页面加载效率。 ### 2. 安装与引入 首先,你...
jQuery图片浏览器源码是一种基于流行的JavaScript库jQuery开发的图片查看工具。它允许用户在网页上以优雅的方式浏览图片集,通常具有幻灯片展示、缩放、导航箭头以及全屏模式等功能。以下是对这个主题的详细解释: ...
9. **跨浏览器兼容性**:虽然jQuery致力于解决浏览器之间的差异,但在实际应用中,开发者仍需关注IE、Chrome、Firefox等主流浏览器下的表现,确保导航栏在各浏览器上的兼容性。 10. **性能优化**:合理使用事件委托...
2. `history.pushState(null, null, document.URL)`: 第一次调用`pushState`方法,将当前URL添加到历史记录栈,这样即使用户点击后退按钮,浏览器也不会回到之前的URL。 3. `window.addEventListener('popstate', ...
《jQuery Load方法详解及其在网页动态加载中的应用》 在Web开发中,jQuery库以其简洁易用的API和强大的功能,成为了JavaScript开发者的首选工具之一。"jquery-load-demo"这个项目,显然着重展示了jQuery的load()...
本教程将详细讲解如何利用jQuery实现一个浏览器嗅探器特效,帮助开发者识别用户正在使用的浏览器类型、内核版本以及设备的基础信息。 首先,要实现浏览器嗅探器,我们需要理解jQuery中的`navigator`对象。这个对象...
- 检查浏览器兼容性:虽然jQuery LazyLoad支持大部分现代浏览器,但在一些旧版本或非主流浏览器中可能存在问题。 - 调试:在开发过程中,可以禁用懒加载以便快速预览所有图片。可以通过移除`lazyload`类或临时修改...
【jQuery仿360浏览器导航栏】是一种网页设计技术,主要使用JavaScript库jQuery来实现类似360浏览器的导航栏效果。这个效果通常包括动态滚动、下拉菜单、平滑过渡以及自定义图标等特性,使得网站的头部导航更加吸引...
jQuery 的 LazyLoad 插件提供了一种高效的方法来处理这个问题,特别是对于那些图片众多、流量消耗大的网站而言。jQuery LazyLoad 实现了图片的延时加载(也称为懒加载),即只有当图片进入用户可视区域时,才会开始...
为了解决这一问题,开发者们引入了图片预加载技术,其中jQuery LazyLoad是广泛应用的一种解决方案。 jQuery LazyLoad 是一个jQuery插件,它的主要功能是在用户滚动页面到图片所在位置时才开始加载图片,而不是在...
默认情况下,jQuery的AJAX请求包括`load`方法,可能会被浏览器缓存,导致无法获取最新的数据。可以通过设置全局的`ajaxSetup`来关闭缓存: ```javascript $.ajaxSetup({ cache: false }); ``` 此外,还有其他几种...