本系列文章中所指的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)
}
|
浙公网安备 33010602011771号