JS 原生 API 之 History

API 简介

属性 描述
length 会话历史中元素的数目,包括当前加载的页
state 返回一个表示历史堆栈顶部的状态值(pushState 的第一个参数)
方法 描述
back 前往上一页,可以点击浏览器左上角的返回按钮模拟此方法,等价于 history.go(-1)
forward 前往下一页,可以点击浏览器左上角的前进按钮模拟此方法,等价于 history.go(1)
go 前往浏览器历史记录的某一页,比如 go(1) 代表下一页,go(-1) 代表上一页
pushState 添加历史记录中的条目,浏览器 URL 会变化,但不会加载该页面
replaceState 修改历史记录中的条目,浏览器 URL 会变化,但不会加载该页面

示例

获取当前浏览历史堆栈顶部的状态值

let state = window.history.state

返回上一页

window.history.forward()

添加一条历史记录中的条目

// 参数一为状态对象,可用 state 获取
// 参数二为标题,目前 Firefox 忽略这个参数
// 参数三为需要添加的 URL
// 与 replaceState 的参数相同
window.history.pushState({ name: 'test' }, 'test page', 'test.html')

监听浏览历史堆栈的变化,前进或后退时会触发,添加和修改不触发

window.onpopstate = function (event) {
  console.log(event.state)
}
除特殊说明外本人博客均属原创,转载请注明出处:http://blog.johnhan.cn/blog_1097.html
京ICP备19044523号-1