在history中跳转
使用 back()
, forward()
和 go()
方法来完成在用户历史记录中向后和向前的跳转。
向前和向后跳转
在history中向后跳转:
window.history.back();
这和用户点击浏览器回退按钮的效果相同。
类似地,你可以向前跳转(如同用户点击了前进按钮):
window.history.forward();
跳转到 history 中指定的一个点
你可以用 go()
方法载入到会话历史中的某一特定页面, 通过与当前页面相对位置来标志 (当前页面的相对位置标志为0).
向后移动一个页面 (等同于调用 back()
):
window.history.go(-1);
向前移动一个页面, 等同于调用了 forward()
:
window.history.go(1);
类似地,你可以传递参数值2并向前移动2个页面,等等。
您可以通过查看长度属性的值来确定的历史堆栈中页面的数量:
let numberOfEntries = window.history.length;
popstate 事件
以下皆是在谷歌浏览器中的测试结果
- 单纯用
window.location.href = url
来导航页面时,并不会触发popstate
事件 - 当用
window.location.href
导航页面,此时通过浏览器的前进、后退或者用api
window.history.back()
,window.history.forward()
,window.history.go(1)
也不会触发popstate
事件,不过此时是可以正常切换页面文档的(即浏览器地址改变,相应页面文档也会加载) - 当用
pushState
向浏览器加入一条记录时,或者replaceState 替换一条记录时,当浏览器地址改变时,才会涉及到触发popstate
事件
例如
A.html, B.html, C.html
三个页面,且三个页面都监听了popstate
事件,此时在A页面 通过window.history.pushState(null, null, './B.html')
,向浏览器push
一条历史记录,会发现,此时,浏览器地址改变为B.html
,但是文档内容还是A.html
.如果想让文档内容也是B.html
还需要刷新一下或者调用api
window.location.reload()
或 window.history.go(0)
刷新页面,如不执行刷新重载操作,pushState,replaceState
只是会改变浏览器的历史记录,不会载入文档页面,vue
的单页面也是利用了此api
不刷新页面的操作,利用js
显示隐藏元素。
目前个人使用方案
-
在传统多页面的跳转,可以在每个页面都监听
popstate
事件,当地址改变时,调用window.location.reload()
-
在页面跳转用
window.history.pushState(null, null, url)
,然后执行window.history.go(0)
主动刷新 -
通过这种方式做多页面跳转时,通过浏览器的前进、后退或者用api
window.history.back(),window.history.forward(),window.history.go(1)
都可以正常运行,且可以触发popstate
事件。 -
当然也可以用之前的
window.location.href = url
来做跳转,然后用浏览器的前进、后退或者用api
window.history.back(),window.history.forward(),window.history.go(1)
也可以正常运行,只不过不触发popstate
事件。