history.pushState 实现浏览器页面不刷新修改url链接 - 小小小小沈先生

时间:2024-03-02 10:56:45

history.pushState 实现浏览器页面不刷新修改url链接

  最近遇到了在不刷新页面的情况下修改浏览器url链接的需求,遂求助于万能的度娘,最终通过history.pushState()完美解决问题。现在将我理解的一些内容分享一下,不对的地方欢迎大家指出。

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

history.pushState()的浏览器兼容性

 

  简单介绍一下方法的相关信息:

history.pushState(stateObject, title, url);

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

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

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

3.地址(url)--新的历史记录条目的地址(可选,不指定的话则为文档当前URL);浏览器在调用pushState()方法后不会加载该地址;传入的URL与当前URL应该是同源的,否则,pushState()会抛出异常。

 

  下面以博客园官网为例具体说明:

  打开博客园官网链接 https://www.cnblogs.com/ ,F12打开控制台并输入 window.history,可以得到window.history的相关信息,如下图所示,我们关注的主要是红框标出的三个信息,其中length为浏览记录队列长度,由于这个页面是新打开的,队列中只有当前页面链接相关信息,其值为1,state值将在下面介绍,pushState即history.pushState(),不多赘述。

  接下来我们开始实现修改浏览器url链接,在控制台输入 

window.history.pushState({status: 0} ,\'\' ,\'?data=1\')

 

执行后页面没有刷新,观察浏览器的链接变成了 https://www.cnblogs.com/?data=1,成功实现在不刷新页面的情况下修改浏览器url链接。pushState()的参数url有多种用法,除了上述用法,还可以是 ‘https://www.cnblogs.com/?data=1’ 、‘data/1’、\'/data/1\' 、‘data=1’ 等等,大家可以自己尝试,同时需要注意url不支持跨域。

  再次获取window.history信息,对比pushState方法执行前后window.history的变化可以发现,length变为2,这是因为方法创建了新的浏览记录,并将新的链接插入到浏览记录队列中;state值为{status: 0},与方法的参数stateObject相对应,实现了数据传递,新页面中可以通过执行 window.history.state.status ,得到参数中status的值0,最后附上结果如图所示: