HTML5   发布时间:2022-04-25  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了HTML5 history历史记录的几个关键词大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
@H_166_5@mark一下,省的忘了而已

@H_673_8@1. HTML4时代的history API


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

 

@H_673_8@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的调用

 

@H_673_8@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 history历史记录的几个关键词全部内容,希望文章能够帮你解决HTML5 history历史记录的几个关键词所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。