关于history的一点心得
history.length
length 是指当前浏览过多少个页面,无论你是执行后退还是前进一页,history 都是不变的,除非在当前页面新打开一个链接,那么 history 就会加一。
history.pushState
history.pushState(State,Title,Url),不跳转,新增一条历史记录,当前页面的 url 会变成 Url,但是不会刷新当前页面,如果此时新打开一个页面,后退会去到 Url 链接,但页面内容还是 url 的内容,再后退就会去到 url 链接,内容不变,就是 url 的内容。
需要注意的是,history.pushState 的 Url 不能跨域,否则会报错。
history.replaceState
history..replaceState(State,Title,Url),不跳转,修改浏览历史中当前纪录,当前页面 url 的历史记录会被替换成指定的 Url,当前页面的 url 会变成 Url,直接替换掉原来的 url,相当于原来的 url 已经不存在,但是不会刷新当前页面,如果此时新打开一个页面,后退会去到 Url 链接,但页面内容会改变成 Url 的内容,再后退就没有可后退的链接了。
需要注意的是,history.replaceState 的 Url 不能跨域,否则会报错。
location.replace
location.replace(url) 会跳转至指定页面,当前页面 url 的历史记录不会保留,相当于替换了当前的历史记录
location.href
location.href:跳转至指定页面,当前页面 url 的历史记录会保留
window.onpopstate
每当同一个文档的浏览历史(即 history 对象)出现变化时,就会触发 popstate 事件。仅仅调用 pushState 方法或 replaceState 方法 ,并不会触发该事件,只有用户点击浏览器倒退按钮和前进按钮,或者使用 JavaScript 调用 back、forward、go 方法时才会触发。使用的时候,可以为 popstate 事件指定回调函数。这个回调函数的参数是一个 event 事件对象,它的 state 属性指向 pushState 和 replaceState 方法为当前 URL 所提供的状态对象(即这两个方法的第一个参数 state)。如:
1 |
|
上面代码中的 event.state,就是通过 pushState 和 replaceState 方法,为当前 URL 绑定的 state 对象。这个 state 对象也可以直接通过 history 对象读取 history.state。
实践
最近做的一个需求是这样的:先由中转页 a 跳去目标页面 b,按回退按钮,跳去中间后台配置页面 b1,再按回退按钮跳去中间后台配置页面 b2,以此下去,只到跳转完所有后台配置的页面,最终跳回目标页面 b,再按返回退出所有页面。
用 history 来解释的话就是:
1 |
|
用上面的知识来解决就是
1 |
|
以上就是利用 history 和 location 解决的一个简单示例,其他的应用还可以是改变一个页面的 url 而不用刷新页面等。
参考教程:
history.pushState 无刷新改变 url
HTML5 历史状态管理 history API-pushState/replaceState 与 popstate 事件
- 本文作者:冷星
- 本文链接:http://lengxing.club/2019/09/06/%E5%85%B3%E4%BA%8Ehistory%E7%9A%84%E4%B8%80%E7%82%B9%E5%BF%83%E5%BE%97/index.html
- 版权声明:本博客所有文章均采用 BY-NC-SA 许可协议,转载请注明出处!