Mr笔记

Appearance

History ​

[TOC]

索引 ​

属性：

  • history.length：number，只读，返回一个表示会话历史中的条目数量的整数，包括当前加载的页面。
  • history.state：State，用于访问/操作浏览器历史记录中的状态对象。主要用于SPA中的导航操作。
  • history.scrollRestoration：auto|manual，默认：auto，控制浏览器是否在导航时自动恢复滚动位置。

方法：

  • history.back()：()，用于让浏览器回到历史记录中的前一个页面。可理解为模拟用户点击浏览器的“后退”按钮。
  • history.forward()：()，用于让浏览器前进到历史记录中的下一个页面。可理解为模拟用户点击浏览器的“前进”按钮。
  • history.go()：(delta)，用于在浏览器历史记录栈中进行前进或后退操作。
  • history.pushState()：(state,title?,url?)，用于将一个新的历史记录条目添加到浏览器的历史记录栈中，而不会刷新页面。
  • history.replaceState()：(state,title?,url?)，用于替换当前浏览器历史记录中的条目。

事件：

  • onpopstate：是一个浏览器的事件监听器，用于监听浏览器历史记录的变化。当用户通过浏览器的“后退”/“前进”按钮导航，或通过 pushState()/replaceState() 方法修改历史记录时触发。

History ​

属性 ​

  • history.length：number，只读，返回一个表示会话历史中的条目数量的整数，包括当前加载的页面。
  • history.state：State，用于访问/操作浏览器历史记录中的状态对象。主要用于SPA中的导航操作。
  • history.scrollRestoration：auto|manual，默认：auto，控制浏览器是否在导航时自动恢复滚动位置。

方法 ​

back() ​

history.back()：()，用于让浏览器回到历史记录中的前一个页面。可理解为模拟用户点击浏览器的“后退”按钮。

forward() ​

history.forward()：()，用于让浏览器前进到历史记录中的下一个页面。可理解为模拟用户点击浏览器的“前进”按钮。

go() ​

history.go()：(delta)，用于在浏览器历史记录栈中进行前进或后退操作。

  • delta：number，表示在浏览器历史记录栈中的偏移量。
    • 正数：浏览器会前进delta个页面。
    • 负数：浏览器会后退delta个页面。
    • 0：浏览器会刷新当前页面。
    • 超出范围：超出历史栈的范围，浏览器不会做任何跳转，页面保持不变。

pushState() ​

history.pushState()：(state,title?,url?)，用于将一个新的历史记录条目添加到浏览器的历史记录栈中，而不会刷新页面。

  • state：object，包含有关该历史条目的信息的对象。

  • title?：string，新的历史记录条目的标题。很少用到，常设为""。

  • url?：string，新的历史记录条目的 URL。必须是同一域名下的有效路径。

  • 示例：

    • 基本用法
    js
    // state 对象包含当前视图的信息
const state = { page: 1 };
const title = "";  // 通常是空字符串
const url = "/page1";

// 将新的历史记录条目添加到浏览器历史记录栈
history.pushState(state, title, url);
    • 结合popstate 事件
    js
    // 监听 popstate 事件
window.addEventListener("popstate", function(event) {
  console.log("State changed:", event.state);
  // 根据新的 state 进行页面更新
  updatePageView(event.state.section);
});

// 通过 pushState 改变历史记录
history.pushState({ section: "home" }, "", "/home");

// 模拟用户点击浏览器的后退按钮
history.back();

replaceState() ​

history.replaceState()：(state,title?,url?)，用于替换当前浏览器历史记录中的条目。

  • state：object，包含有关该历史条目的信息的对象。

  • title?：string，新的历史记录条目的标题。很少用到，常设为""。

  • url?：string，新的历史记录条目的 URL。必须是同一域名下的有效路径。

  • 特性：

    • 对比pushState()：
      • pushState()会添加新的历史记录条目，会增加一个新的条目。
      • replaceState()会替换当前历史记录条目，不会改变历史栈的长度。

  • 示例：

    • 替换当前历史记录的URL
    js
    // 当前 URL 是 "/page1"，我们想将它替换为 "/page2"
const state = { page: 2 };
const title = "";
const url = "/page2";

// 替换当前的历史记录条目
history.replaceState(state, title, url);
    • 结合popstate 事件
    js
    // 监听 popstate 事件
window.addEventListener("popstate", function(event) {
  console.log("State changed:", event.state);
  // 根据新的 state 进行页面更新
  updatePageView(event.state.section);
});

// 替换历史记录
history.replaceState({ section: "home" }, "", "/home");

事件 ​

  • onpopstate：是一个浏览器的事件监听器，用于监听浏览器历史记录的变化。当用户通过浏览器的“后退”/“前进”按钮导航，或通过 pushState()/replaceState() 方法修改历史记录时触发。