原生DOM系列-History对象

本系列文章中所指的DOM,都是纯纯的HTML DOM,不包括XML DOM等
提供操作浏览器会话历史的接口
历史记录中包括当前页面中通过iframe加载的页面的历史记录

length

  • 返回一个整形
  • 历史纪录的数量
1
let length = history.length

state

  • 调用pushState和replaceState方法时,同页面一起被写入到history中的数据
  • 可用于保存当前页面的一些状态信息
  • 可以直接通过history.state获取
  • 也可以在事件触发时获取
1
2
3
4
5
history.state
window.addEventListener('popstate', (e) => {
e.state
}, false)

back()

  • 与点击浏览器上的返回按钮相同
  • 如果不是在最早的历史记录页面中执行(也就是还存在可以返回的页面),可触发popstate事件
1
history.back()

forward()

  • 与点击浏览器上的前进按钮相同
  • 如果不是在最近的历史记录页面中执行(也就是还存在可以前进的页面),可触发popstate事件
1
history.forward()

go(num)

  • 页面跳转到历史记录的第n个页面
  • num > 0 则向前跳转
  • num < 0 则向后跳转
1
2
history.go(-1) // 等同于history.back()
history.go(1) // 等同于history.forward()

pushState(state, title, url)

  • state:需要存储到history中的信息
  • title:存入history中的页面的title
  • url:要跳转的url地址,不能跨域
  • 当前页面路径和url所指定的路径都会被存入history中,使用url代替当前页面的路径
  • pushState并不触发事件
  • 页面不会刷新
1
2
3
history.pushState({
'a': 'a'
}, '页面标题(可传空字符串)', '相同域名和端口下的不同地址')

replaceState(state, title, url)

  • 当前页面的路径不会被存入history中,只有replaceState中指定的url存在于history中
  • 地址栏中当前页面的路径被替换掉
  • 页面不会重新刷新
  • 也不触发事件
1
2
3
history.pushState({
'a': 'a'
}, '页面标题(可传空字符串)', '相同域名和端口下的不同地址')

popstate事件

  • 用户点击前进后退时触发
  • 调用history的back()/forward()/go()时触发
1
2
3
4
5
6
7
8
window.addEventListener('popstate', (e) => {
let curState = history.state // e.state
console.log(e)
}, false)
window.onpopstate = (e) => {
console.log(e)
}