当前位置:Gxlcms > html代码 > html5的historyAPI

html5的historyAPI

时间:2021-07-01 10:21:17 帮助过:38人阅读

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

访问地址:http://www.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

人气教程排行