这篇文章将为大家详细讲解有关html5, jquery如何实现在回到历史页面时完全保留之前离开这个页面时的状态,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
比如在页面一个中点开了一个折叠列表(用jquery做的),并且向下拖动了一点滚动条,然后通过列表中的某个按钮跳转到了页面B, B页面中有一个返回按钮,点击一下就能跳回页面,跳回页面时,滚动条保持在之前离开时的状态,并且之前打开的那个折叠列表也要是保持打开的。有哪些html5 API或jquery API可以实现吗?
ps:我试了jquery中的history.back(),可以实现滚动条位置不变,但是折叠列表变成了初始状态(也就是说和刷新了页面一样),具体如下:
页面分为两个,一个是<>强列表页:
,要进入内容页需要登录才行~
你这种需求比较适合使用URL来保存状态,然后使用URL来进行事件驱动。这样的好处在于将各个页面的状态保存在各自的URL里,不管是使用浏览器的前进后退还是将当前链接分享给他的人,都不会丢失页面状态。
驱动过程分为以下几步:
修改URL(触发)→解析URL→调用对应的回调(听众)
其中:
为了不引发界面刷新,修改URL时需要使用URL散列或者history.pushState ()。
注册侦听器,解析URL和调用侦听器可以交给前端路由。(自己年轻的时候也造过一个前端路由的轮子普劳特。js
当然如果不希望把一些状态保存在URL里,那也可以保存在localStorage里。但不变的是<强>一定要用状态来驱动页面行为,而不是先执行页面行为然后再去保存状态强。
简单的状态可以放在散列里
再复杂点的可以放在localstorage或者sessionstorage里
要是再复杂的话,建议还是层叠多个视图吧,这样无论多复杂的状态都会保存
题主如果用传统的整页刷新模式,那必然需要散列标记+ jQuery插件响应的“打配合”方案。但这实在没必要,子栏目页面之间切换而产生的反复加载,解析,执行,渲染,会非常浪费性能……
所以,以“局部刷新“著名的AJAX模式,自然是实现“局部驻留”的极佳方案(IE 6中Web版的前景是最早的实现)~
而且,jQuery的负载()实例方法已经把AJAX Get请求,jQuery空(),jQuery html()封装起来,分分钟实现局部刷新~
以上是用户浏览过程的“前进阶段”,而“后退阶段”就需要先在前进时留下历史记录,再在用户后退(浏览器后退功能或用户触发了前端工程师写的包含history.back()调用的代码)时恢复之前局部刷新过的正文子页面,并把页面主框架中的全局导航菜单指向对应的条目。这种为AJAX记录历史信息的技术就是html 5历史API (history.pushState()是其最常用的方法),即8/9可以用窗口。onhashchange兼容,即6/7就只能用settimeout()模拟hashchange事件或用iframe的窗口。历史来记录窗口。父母的AJAX历史~
上述兼容在Github上已有成熟的开源库,也有结合AJAX, pushState的成熟框架——PJAX ~
(习惯jQuery风格API的人,推荐一下本人开发的PJAX模式框架,EasyWebApp托管于Git@OSC——,
