关于pushState,replaceState方法以及onpopstate事件

概述

  • pushState()存储当前历史记录点,replaceState()替换当前历史记录点,popstate监听当前历史记录点。
  • pushState(),replaceState()是window.history对象中的方法,其中history是window中用来获取History的对象引用,History对象提供了操作浏览器的会话历史,window.history是只读属性。
  • pushState()和replaceState()用来添加和修改历史记录中的条目,通常与popstate一起使用。
    使用 history.pushState() 可以改变referrer,它在用户发送XMLHttpRequest请求时在HTTP头部使用,改变state后创建的XMLHttpRequest对象的referrer都会被改变。因为referrer是标识创建XMLHttpRequest对象时 this 所代表的window对象中document的URL。
  • onpopstate事件
    当活动历史记录条目更改时,将触发popstate事件。如果被激活的历史记录条目是通过对history.pushState()的调用创建的,或者受到对history.replaceState()的调用的影响,popstate事件的state属性包含历史条目的状态对象的副本。在前进和后退时,或者history.back()或者history.forward()调用会触发popstate()事件。注意:当页面重新加载时,页面会接收一个onload事件,但没有 popstate 事件。不会执行onpopstate,你可以读取当前历史记录项的状态对象state,而不必等待popstate 事件, 只需要这样使用history.state 属性:
    let currentState = history.state;

api使用方法

-pushState(state, title, url)
接收三个参数:一个状态对象, 一个标题 (目前被忽略), 和 (可选的) 一个URL.

  1. 状态对象 状态对象state是一个JavaScript对象,
  2. 标题 网页标题
  3. URL 状态对象对应的URL,定义了新的历史URL记录。
    通过pushState () 创建新的历史记录条目。无论什么时候用户导航到新的状态,popstate事件就会被触发。
  • replaceState(state, title, url)
    接收三个参数:一个状态对象, 一个标题 (目前被忽略), 和 (可选的) 一个URL.(同pushState)
    不同是在:replaceState是对当前状态对象的修改。

popstate事件

当活动历史记录条目更改时,将触发popstate事件。在做出浏览器动作时,才会触发该事件,如用户点击浏览器的回退按钮(或者在Javascript代码中调用history.back()或者history.forward()方法)。
参考:https://developer.mozilla.org/zh-CN/docs/Web/API/History_API

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容