5分钟掌握HTML5 history API-职坐标

5分钟掌握HTML5 history API

沉沙 2018-06-05 来源：阅读 1067 评论 0

摘要：HTML5 在 history 对象上添加几个新的方法、事件、属性，用以增强开发者对于浏览器历史记录的控制。大体上说，新的API可以帮助我们在无刷新的情况下改变浏览器的url，新增或者替换之前的历史记录。希望阅读本篇文章以后大家有所收获，帮助大家对HTML5的理解更加深入。

html5 在 history 对象上添加几个新的方法、事件、属性，用以增强开发者对于浏览器历史记录的控制。大体上说，新的API可以帮助我们在无刷新的情况下改变浏览器的url，新增或者替换之前的历史记录。

这里谈谈使用新的 History API时，需要特别注意的地方。

state 保存不了完整对象，只能保存一般对象（plain object），因为可能浏览器使用了JSON方法，方法都被移除掉了。这个我是被坑过的，明明保存了对象，并且在state上面找到了，结果调用方法就报错。

popstate 事件在firefox下，页面直接载入时是不触发的，而 Chrome 和 Safari 下是触发的。这个问题很容易解决，因为我们总是可以通过 history.state 对象获得当前路径的 state 对象，只是在绑定事件的时候需要额外考虑一下第一次的情况（有些库会帮你考虑的）。

每次浏览器历史记录发生变化都会触发popstate事件，包括用户使用前进或者后退按钮，以及调用history接口。如果历史记录是由调用pushState或者replaceState改变的，state对象可通过event对象的state属性获得。

最后，推荐一下TJ写的page.js，一个不仅使用简单，而且对于异步操作非常友好的客户端路由库。

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML5/CSS3频道！

web前端开发自学精通html5和css3 html5零基础教程

本文由 @沉沙发布于职坐标。未经许可，禁止转载。

喜欢 | 1

不喜欢 | 0

看完这篇文章有何感觉？已经有1人表态，100%的人喜欢快给朋友分享吧~

后参与评论

加入IT交流圈

JAVA工程师交流群 +加入

大数据架构师交流群 +加入

人工智能Python交流群 +加入

WEB/H5前端交流群 +加入

WEB前端 直通车

海同师资推荐更多>>

热门就业培训班更多>>

HTML5/CSS330天热搜词更多>>