url的操作之pushState、replaceState和popstate

5,555 阅读3分钟

这是我参与8月更文挑战的第6天,活动详情查看:8月更文挑战

上一节我们说地址栏跳转的时候,谈到了浏览器会缓存用户访问url序列,我们可以通过浏览器的前进后退按钮或者通过js提供的方法,访问这个序列里的url,不过关于这一点上一节我们只说了window.history.go,这里补充两个方法。

补充一点,这些全局方法都是挂在window对象下的,所以下面方法中的window都可以省略,比如window.location,直接写location即可,不过以防变量名冲突,本文中还是会加上window。

window.history.back()

这个方法的作用为返回上一页,相当于浏览器的后退按钮,和window.history.go(-1)达成的效果是一样的。

window.history.forward()

window.history.forward()的作用和window.history.back()的作用相对应,就是前往下一页,相当于浏览器的前进按钮,和window.history.go(1)达成的效果是一样的。

history.pushState()

history.pushState()接收三个参数,用法如下

history.pushState(state, title[, url])

state

暂时没搞懂,直接复制官方原话吧,状态对象是一个JavaScript对象,它与pushState()创建的新历史记录条目相关联。 每当用户导航到新状态时,都会触发popstate (en-US)事件,并且该事件的状态属性包含历史记录条目的状态对象的副本。

title

相当于页面标题吧,不过目前并没有什么卵用,可以忽略

url

这个当然就是我们主要使用的了,一个url,使用此方法之后,这个url将出现在地址栏中。

说完了用法,那这个方法的作用是什么呢?前面我们说了,history会缓存一个用户访问的url序列,跳转页面时候,就会往这个序列里添加一个新的url,其实这个方法的作用也是添加一个url,并展示在状态栏,只不过不是立即跳转的,当你使用它的时候,它只会将目标url添加到序列中,并且出现在地址栏中,但并不会立即加载并跳转到这个页面,但如果你访问了新的页面,点击返回按钮的时候,或者在当前页面刷新时,浏览器就会加载并跳转到你新添加的这个url。不过,需要注意的是,这个方法并不能跳转到站外,它只能跳转到本站的地址(同域名下)。

打开任意网页,在控制栏输入下面的代码,看看地址栏发生了什么变化,这时候页面是不是没有发生变化,然后你再点击刷新按钮试一下

history.pushState({}, 'title', '/user')

history.replaceState()

不同于pushState,replaceState不是往序列里添加,而是修改了当前的url,就像location.hreflocation.replace的区别一样。利用此特性,我们可以动态的修改地址栏的参数,以便在用户下次刷新时候发生不一样的效果,比如我们从其他页面跳转到此页面时会携带一个标识性的参数,我们用完这个参数后可以删除这个参数,以便显示此页面的默认显示内容。

popstate

popstate类似于一个事件函数,当用户在浏览器点击后退、前进,或者在js中调用histroy.back()history.go()history.forward()等,会触发popstate事件;但pushState、replaceState不会触发这个事件。利用这一特性,我们可以在用户前进或者返回页面的时候做一些事情。