history history 是对浏览器历史记录的访问 API。 在 history 中向后跳转,也就是浏览器点击后退箭头的操作。 window.history.back() 在 history 中向前跳转,也就是浏览器点击向前箭头的操作。 window.history.forward() 使用history.go ..

html5 history api 简介

本贴最后更新于 213 天前,其中的信息可能已经时移世改

history

history 是对浏览器历史记录的访问 API。

在 history 中向后跳转,也就是浏览器点击后退箭头的操作。

window.history.back()

在 history 中向前跳转,也就是浏览器点击向前箭头的操作。

window.history.forward()

使用history.go API 跳转到历史访问记录某个点

//向后移动一个页面
window.history.go(-1)

//向前移动一个页面
window.history.go(1)


html5 history 新增

pushState() 例子

//假设在 http://mozilla.org/foo.html 中执行了以下 JavaScript 代码:
var stateObj = {foo: 'bar'}
history.pushState(stateObj, 'page2', 'bar.html')

上面例子会使地址栏显示为http://mozilla.org/bar.html,但并不会导致浏览器去加载 bar.html;

当用户访问了新页面,点击了回退按钮,那么地址栏会显示http://mozilla.org/bar.html,并进行加载 bar.html;

当再次点击回退按钮,地址栏地址会变为http://mozilla.org/foo.html,但内容不会变化,就是知识 url 变化了,但内容还保持着 bar.html 内容。

replaceState() 例子

history.replaceState(stateObj, "page 3", "bar2.html");

对 pushState 添加的历史记录进行修改

popstate

每当活动的历史记录项发生变化时, popstate 事件都会被传递给 window 对象。如果当前活动的历史记录项是被 pushState 创建的,
或者是由 replaceState 改变的,那么 popstate 事件的状态属性 state 会包含一个当前历史记录状态对象的拷贝。

获取当前状态

var currentState = history.state;

没有进行 pushState 或 replaceState 的历史记录,默认 state 为 null


参考文献: MDN

  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    425 引用 • 1013 回帖 • 887 关注
  • HTML

    HTML5 是 HTML 下一个的主要修订版本,现在仍处于发展阶段。广义论及 HTML5 时,实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

    85 引用 • 263 回帖 • 214 关注
回帖   
请输入回帖内容...