Html5 History API解析

浏览器前进与回退操作

在传统的浏览器中我们只能通过调用window.history对象的 forward() 、 back() 或 go(number|url) 方法来进行页面的前进、回退或跳转到某一页面。

而Ajax技术出现出现后我们常常用来实现页面无刷新的局部渲染效果,但却无法对无刷新的页面进行前进后退的操作。

显然,HTML 5标准制定者也考虑到这一点,于是在HTML 5中为history对象新增了 pushState() 、 replaceState() 接口以及state属性

state属性

state属性的值为对象(默认值为null),该值由用户通过pushState()方法传入,用于记录与改条历史记录相关的页面数据信息

pushState(state, title, url)

pushState()方法包含三个参数:

  • state: 用户为该条历史记录写入的数据对象来存储页面相关数据信息
  • title:页面标题
  • url:页面url

在HTML 5中,我们使用history.pushState()会往history中写入一条历史记录,history.length的值也会+1,history.state被传入的state对象覆盖。

replaceState(state, title, url)

replaceState()方法的三个参数和pushState()相同,但replaceState()用于修改当前页的历史记录。

如何使用state对象?

HTML5除了带给我们以上三个新增的接口以外,还允许浏览器在window上监听popState事件,每当对页面进行前进或后退的操作时,浏览器会从历史记录中取出state对象并通过参数传入popState事件的回调函数中:

window.addEventListener("popstate", function() {
    var currentState = history.state;
    /*
     * 使用state做点事情
    */                                            
});

这部分的API比较少,也没什么好讲的,权当做个记录,END

 

posted @ 2015-04-16 16:12  白牙青森  阅读(481)  评论(0编辑  收藏  举报