深入学习HTML5的history API（html5的认识）

不得不佩服下谷歌Chrome团队，利用HTML5和CSS3实现了一本相当漂亮的在线电子书：《关于浏览器和互联网20件事》。

访问地址：http://20thingsilearned.com

话说这本电子书已经出来很久了，不过今天来看依然觉得相当的赞。我们无需刷新页面，就可以来回切换电子书页面，这正是OPOA（One Page One Application）的完美体现。

现在正在学习关于history API这方面的东西，所以特别感兴趣的是他们如何使用window.history.pushState()和window.history.replaceState()来做页面之间的不刷新切换。

今天查阅了一些资料，基本上对history API有了一个基本了解。

首先要说的就是history是个全局，即window.history。看到这个变量名你一定很熟悉，因为经常可以看到用window.history.back()或者window.history.go(-1)来返回上一页的JavaScript代码。

所以history并不是什么新东西，在HTML4的时代，我们可以使用它的这几个属性和方法：

length：历史堆栈中的记录数。

back()：返回上一页。

forward()：前进到下一页。

go([delta])：delta是个数字，如果不写或为0，则刷新本页；如果为正数，则前进到相应数目的页面；若为负数，则后退到相应数目的页面。

现在，HTML5为其又添加了以下2个方法：

pushState(data, title [, url])：往历史堆栈的顶部添加一条记录。data为一个对象或null，它会在触发window的popstate事件(window.onpopstate)时，作为参数的state属性传递过去；title为页面的标题，但当前所有浏览器都忽略这个参数；url为页面的URL，不写则为当前页。

replaceState(data, title [, url])：更改当前页面的历史记录。参数同上。这种更改并不会去访问该URL。不过目前只有Safari 5.0+、Chrome 8.0+、Firefox 4.0+和iOS 4.2.1+支持。如果想兼容老浏览器的话，可以试试History.js，而且它还修正了一些bug。

当然，在移动平台上，我们可以大胆尝试html5的history API。ios3.0+ 和Android2.0+ 平台的内置浏览器对history都比较完美了，利用它我们可以web app更趋向与native app。

下面，推荐几篇文章：

.Manipulating the browser history

.Session history and navigation

.Manipulating History for Fun & Profit

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。