JavaScript 中 history 对象的用法？

推荐答案

// www.javascriptcn.com code example
// 后退到上一个页面
history.back();

// 前进到下一个页面
history.forward();

// 跳转到历史记录中的特定页面
history.go(-1); // 后退一页
history.go(1);  // 前进一页
history.go(0);  // 刷新当前页面

// 添加新的历史记录
history.pushState({ page: 1 }, "title 1", "?page=1");

// 替换当前历史记录
history.replaceState({ page: 2 }, "title 2", "?page=2");

// 监听 popstate 事件
window.addEventListener('popstate', function(event) {
  console.log('Location: ' + document.location + ', state: ' + JSON.stringify(event.state));
});

本题详细解读

history 对象概述

history 对象是 JavaScript 中用于操作浏览器历史记录的对象。它允许你在不重新加载页面的情况下，操作浏览器的历史记录栈。history 对象提供了多种方法来导航历史记录，并且可以通过 pushState 和 replaceState 方法来添加或修改历史记录。

history.back()

history.back() 方法用于导航到浏览器历史记录中的上一个页面。它相当于用户点击浏览器的“后退”按钮。

history.forward()

history.forward() 方法用于导航到浏览器历史记录中的下一个页面。它相当于用户点击浏览器的“前进”按钮。

history.go()

history.go() 方法允许你跳转到历史记录中的特定页面。参数可以是正数、负数或零：

• history.go(-1)：后退一页。
• history.go(1)：前进一页。
• history.go(0)：刷新当前页面。

history.pushState()

history.pushState() 方法用于向浏览器历史记录中添加一个新的状态。它接受三个参数：

1. state：一个 JavaScript 对象，表示与新历史记录条目关联的状态。
2. title：新历史记录条目的标题（目前大多数浏览器忽略此参数）。
3. url：新历史记录条目的 URL（可选）。

history.pushState({ page: 1 }, "title 1", "?page=1");

history.replaceState()

history.replaceState() 方法与 pushState 类似，但它不会创建新的历史记录条目，而是替换当前的历史记录条目。

history.replaceState({ page: 2 }, "title 2", "?page=2");

popstate 事件

popstate 事件在用户导航历史记录时触发，例如点击浏览器的“后退”或“前进”按钮。你可以通过监听这个事件来处理历史记录的变化。

window.addEventListener('popstate', function(event) {
  console.log('Location: ' + document.location + ', state: ' + JSON.stringify(event.state));
});

注意事项

• pushState 和 replaceState 方法不会触发页面的重新加载，它们只会修改浏览器的历史记录。
• popstate 事件仅在用户通过浏览器按钮或 history.back()、history.forward() 等方法导航时触发，直接调用 pushState 或 replaceState 不会触发该事件。