HTML5 history历史记录的几个关键词

Mark一下,省的忘了而已

1. HTML4时代的history API


A) history.length:当前历史列表中的历史记录数(我大概测了下,IE6+是从0开始的,其他的是从1开始的,若有误请反馈哈,^_^);
B) history.go(n):前进或后退n条记录,当n=0或空时会刷新当前页;
C) history.back():后退一步;
D) history.forward():前进一步;

 

2. HTML5新增的API
A) history.pushState(data,title [,url]):往历史记录堆栈顶部添加一条记录;data会在onpopstate事件触发时作为参数传递过去;title为页面标题,当前所有浏览器都会 忽略此参数;url为页面地址,可选,缺省为当前页地址;
B) history.replaceState(data,url]) :更改当前的历史记录,参数同上;
C) history.state:用于存储以上方法的data数据,不同浏览器的读写权限不一样;
D) window.onpopstate:响应pushState或replaceState的调用

 

3. 浏览器的兼容性&检测
在HTML5支持不一的时代,新的API总会存在或这或那的兼容性问题。因此我们有必要了解新接口在不同浏览器下的兼容性。

 

浏览器兼容性表:

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
replaceState,pushState 5 4.0 (2.0) 10 11.50 5.0
history.state 18 4.0 (2.0) 10 11.50 6.0

 

如何检测浏览器是否支持History API?
function supports_history_api() { return !!(window.history && history.pushState); }

 

如何检测history.state的兼容性呢?我尝试赋值history.state=1,但history.state在不同浏览器下的读写权限不一样,所以我们换种方式:
var originalHistoryState = history.state; // 保存原有的历史信息

history.replaceState(1,null); // 替换当前历史信息

var stateSupport = history.state == 1; // 是否存储到刚设置的历史信息 history.replaceState(originalHistoryState,null); // 恢复原来的历史信息

相关文章

HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码