zoukankan      html  css  js  c++  java
  • 不刷新网页修改url链接:history.pushState()和history.replaceState()新增、修改历史记录用法介绍

      最近遇到了在不刷新页面的情况下修改浏览器url链接的需求,考虑到可以通过history.pushState()解决。现在将我理解的一些内容分享一下,不对的地方欢迎大家指出。

      在使用方法前首先需要了解它的兼容性,history.pushState()存在一定的兼容性问题,可以通过 https://caniuse.com/#search=pushState 查看支持的浏览器版本。

      history.pushState(stateObject, title, url);

      history.pushState()主要是在不刷新浏览器的情况下,创建新的浏览记录并插入浏览记录队列中。

    1、状态对象(stateObject)—— stateObject是一个JavaScript对象,通过pushState方法可以将stateObject内容传递到新页面中。

    2、标题(title)—— 几乎没有浏览器支持该参数,但是传一个空字符串会比较安全。

    3、地址(url)—— 新的历史记录条目的地址(可选,不指定的话则为文档当前URL)。

      浏览器在调用pushState()方法后不会加载该地址;传入的URL与当前URL应该是同源的,否则,pushState()会抛出异常。

    window.history.replaceState({}, '', `?query=${this.query}`)

      上面代码就可以在不刷新网页的情况下,更新url链接了。

      然后抽空研究了下这两个新方法,确实可以解决很多问题

    一、使用pushState()方法 可以控制浏览器自带的返回按钮

      有时候我们想让用户点击浏览器返回按钮时,不返回,或执行其他操作,这时,就用到history.pushState()方法。

      history.pushState(data,title,url) ,每执行一次都会增加一条历史记录

      data:要设置的history.state的值,可以是任意类型的值,可根据此值进行判断执行想要的操作。

      比如监听浏览器的前进后退事件:

    window.addEventListener("popstate", function() {
        // 取出 设置好的 history.state 值,做判断
    });

    二、history.replaceState() 与pushState()功能类似,除了这点:

      replaceState()是用来修改当前的历史记录(history实体),而不是创建一个新的历史记录,所以,当执行完history.replaceState()后,点击返回按钮照样会返回上一个页面。  当需要更新一个state对象或者当前history实体时,可以用replaceState()来实现。

      用法:当在a页面使用replaceState()修改了历史记录后,跳转到b页面,后退到a页面时,历史记录就是修改过的。

  • 相关阅读:
    制作ubuntu容器完整步骤
    linux系统python3安装pip
    ssh连接服务器提示拒绝了密码
    ubuntu中vi编辑中按键错误
    虚拟机ubuntu连不上网
    NOIP2020退役记
    【NOIp2020游记】
    loki简单安装配置使用
    .net下com调用支持x86/x64
    nginx 504 Gateway Time-out
  • 原文地址:https://www.cnblogs.com/goloving/p/11739584.html
Copyright © 2011-2022 走看看