h5 history api使用

h5 history api使用

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, title [, url]) ：更改当前的历史记录，参数同上； 
C) history.state：用于存储以上方法的data数据，不同浏览器的读写权限不一样； 
D) window.onpopstate：响应pushState或replaceState的调用；

 

主要写html5的api。

当前活动历史项改变时会触发window.onpopstate事件，例如history.go(1),history.back()，history.forward()或者手动点击前进后退。

history.pushState history.replaceState的调用并不会触发window.onpopstate事件。

然后可以见window.onpopstate事件中做出相应的更改来更新ajax载入，达到刷新页面的结果。

 

可以参考的博客：http://www.zhangxinxu.com/wordpress/2013/06/html5-history-api-pushstate-replacestate-ajax/

posted on 2015-09-16 15:04  梦见世界 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/lifeisshort/p/4813376.html