Html5 History API解析

最新推荐文章于 2025-08-29 11:16:19 发布

转载最新推荐文章于 2025-08-29 11:16:19 发布 · 98 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/WhiteCusp/p/4427989.html

本文介绍HTML5中的History API，包括pushState(), replaceState()方法及state属性的应用，演示如何实现页面前进后退功能并保持页面状态。

浏览器前进与回退操作

在传统的浏览器中我们只能通过调用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

转载于:https://www.cnblogs.com/WhiteCusp/p/4427989.html