浏览器记录
在浏览器中存有history和location对象。可以通过其中的一些方法,可以进行导航跳转:
-
history.pushState
无需刷新增加页面栈记录,实现改变浏览器路径。
-
history.replaceState
修改当前的页面栈的记录。
-
window.history.go
加载历史列表中的某个特定具体页面,可传具体的参数,表示跳转到页面栈中的位置。
该方法只是移动页面栈指针,并不会修改页面栈的记录,就是不会改动到页面栈的数量。
-
window.history.forward
跳转到当前页面栈指针所指前一个记录的方法,页面栈的指针前移动一个位置。
相当于window.history.go(1),调用window.history.forward()不会刷新页面 -
window.history.back
在浏览器中后跳,页面栈中指针后移动一个位置,等同于window.history.go(-1),和点击后退按钮一个效果。
-
window.location.href
在导航中产产生新的历史记录,将字符串设置到window.location与设置到window.location.href行为一致
-
window.location.hash
hash以‘#’开头,通过hash可以修改URL的hash值。
-
window.location.replace()
替换或者是修改当前页面栈的记录。
浏览器的相关事件
-
popstate
在history.pushState或者history.replaceState产生的页面栈中,当页面发生‘前进’或者‘后退’的时候,就会触发popstate事件,可以通过window.addEventListener()监听这些事件。
window.addEventListener("popstate", function (event) { console.log(event) })
-
hashchange
监听浏览器hash值的变化,语法:
window.addEventListener("hashchange", function (event) { console.log(event); })
-
手动触发事件
对于popstate事件,只有在移动页面栈指针的时候才被触发,这样不利于我们对事件的控制。
dispatchEvent方法,可以在不移动页面栈指针的时候控制popstate事件的触发。