最近遇到了在不刷新页面的情况下修改浏览器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()会抛出异常。
下面以博客园官网为例具体说明:
打开博客园官网链接 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,最后附上结果如图所示: