一、ajax载入与浏览器历史的前进与后退
众所周知,Ajax可以实现页面的无刷新操作——优点;但是,也会造成另外的问题,无法前进与后退!曾几何时,Gmail似乎借助iframe搞定,如今,HTML5让事情变得如同过家家般简单。
当执行Ajax操作的时候,往浏览器history 中塞入一个地址(使用pushState )(这是无刷新的);于是,返回的时候,通过URL或其他传参,我们就可以还原到Ajax之前的模样。
本demo所展示的就是ajax的内容载入与地址栏的前进与后退,典型应用,对于熟悉相关知识点很有帮助。
二、demo实例
您可以狠狠地点击这里:HTML5 history API与ajax分页实例
demo结构大致如下:左边导航菜单,右侧详细内容。
如果我们想偷懒,导航直接URL地址,点击刷新得了。但头尾内容都是一样的,刷新总显得浪费。从体验上讲,点击导航,右侧Ajax局部刷新是更优的策略。
Ajax局部刷新小菜,稍有经验都能轻松应对。现在如果提出如下需求:每次ajax刷新就如果页面刷新一样,可以后退查看之前内容,怎么破?
我的策略如下:
- 每次手动点击左侧的菜单,我将Ajax地址的查询内容(
? 后面的)附在demo HTML页面地址后面,使用history.pushState 塞到浏览器历史中。
- 浏览器的前进与后退,会触发
window.onpopstate 事件,通过绑定popstate 事件,就可以根据当前URL地址中的查询内容让对应的菜单执行Ajax载入,实现Ajax的前进与后退效果。
- 页面首次载入的时候,如果没有查询地址、或查询地址不匹配,则使用第一个菜单的Ajax地址的查询内容,并使用
history.replaceState 更改当前的浏览器历史,然后触发Ajax操作。
于是,你会看到:
四、其它点什么
- history.pushState
菊花插一刀之意,用法举例:
history.pushState({},"页面标题","xxx.html");
history.pushStatehistory.replaceState 换把菊花刀之意,用法举例: history.replaceState(null,sans-serif;">window.onpopstate 在菊花刀拔插的时候……,用法举例: window.addEventListener("popstate",function() {
var currentState = history.state;
/*
* 该干嘛干嘛
*/
});
浏览器兼容性表:
Feature |
Chrome |
Firefox (Gecko) |
Internet Explorer |
Opera |
Safari |
replaceState,pushState |
5 |
4.0 (2.0) |
10 |
11.50 |
5.0 |
history.state |
18 |
6.0 |
恩,就这些!
补充于2013-06-20 @滴洋在评论中提到pjax. 那pjax是什么呢?
pjax是一种基于ajax+history.pushState的新技术,该技术可以无刷新改变页面的内容,并且可以改变页面的URL。pjax是ajax +pushState 的封装,同时支持本地存储、动画等多种功能。目前支持jquery、qwrap、kissy等多种版本。 (编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|