【JavaScript】history 对象

history 对象

history 提供与当前窗口的会话历史记录相关的 API。



常用属性

  1. length:一个整数,表示会话历史的数目。
  2. scrollRestoration:允许 Web 应用程序在历史导航上显式地设置默认滚动恢复行为。
    1. auto:恢复到用户已滚动到的页面上的位置。
    2. manual:不恢复位置。
  3. state:一个任意值,表示历史堆栈顶部的状态。这是一种不必等待 popstate 事件而查看状态的方式。



常用方法

  1. history.back():跳转到前一个页面。
  2. history.forward():跳转到后一个页面。
  3. history.go(num):往前/后跳 num 步;num 为正 → 往前跳、为负 → 往后跳、为 0 / 没有 → 刷新页面。
  4. history.pushState(stateObj, title[, url]):向浏览器的会话历史栈增加一个条目。
  5. history.replaceState(stateObj, title[, url]):修改当前历史记录实体。

pushState

history.pushState 方法会向浏览器的会话历史栈增加一个条目。

该方法是异步的。为 popstate 事件增加监听器,以确定导航何时完成。state 参数将在其中可用。

pushState(state, unused);
pushState(state, unused, url);

state 对象是一个 JS 对象,该对象与通过 pushState 创建的新历史条目相关联。每当用户导航到新的 state,都会触发 popstate 事件,并且该事件的 state 属性包含历史条目 state 对象的副本。

state 对象可以是任何能序列化的对象。因为 Firefox 将 state 对象保存到用户的磁盘上,以便用户重启浏览器可以恢复,我们对 state 对象序列化的表示施加了 16M 的限制。如果你传递的 state 对象的序列化表示超出了 pushState 可接受的大小,该方法将抛出异常。如果你需要更多的空间,建议使用 sessionStorage / localStorage。


unused:由于历史原因,该参数存在且不能忽略;传递一个空字符串是安全的,以防将来对该方法进行更改。


url:新历史条目的 URL。请注意,浏览器不会在调用 pushState 之后尝试加载该 URL,但是它可能会在以后尝试加载该 URL,例如,在用户重启浏览器之后。新 URL 可以不是绝对路径;如果它是相对的,它将相对于当前的 URL 进行解析。新的 URL 必须与当前 URL 同源;否则,pushState 将抛出异常。如果该参数没有指定,则将其设置为当前文档的 URL。


popstate

  • 每当激活同一文档中不同的历史记录条目时,popstate 事件就会在对应的 window 对象上触发。
  • 如果当前处于激活状态的历史记录条目是由 history.pushState() 方法创建的或者是由 history.replaceState() 方法修改的,则 popstate 事件的 state 属性包含了这个历史记录条目的 state 对象的一个拷贝。

注意:直接调用 history.pushState() / history.replaceState() 不会触发 popstate 事件。popstate 事件只会在浏览器某些行为下触发,比如点击后退按钮(或者在 JS 中调用 history.back() 方法)。即在同一文档的两个历史记录条目之间导航会触发该事件。

不同浏览器在加载页面时处理 popstate 事件的形式不同。页面加载时 Chrome 和 Safari 会触发 popstate 事件,但 Firefox 不会。



封装 pushState

直接调用 pushState / replaceState 方法不会触发 popState 事件,如果想在调用 pushState / replaceState 时做些什么,可以对其进行封装。

const rawPushState = window.history.pushState;
window.history.pushState = function (...args) {
    console.log('pushState', args);
    rawPushState.apply(window.history, args);
};

const rawReplaceState = window.history.replaceState;
window.history.replaceState = function (...args) {
    console.log('replaceState', args);
    rawReplaceState.apply(window.history, args);
};

你可能感兴趣的:(JavaScript,笔记,javascript,开发语言,ecmascript)