压迫器 Back 与 Forward 使用指南

什么是“压迫器”Back 与 Forward？

“压迫器”并非标准术语，此处指代浏览器中通过 JavaScript 控制页面前进（forward）与后退（back）行为的能力。 开发者常利用 window.history API 实现自定义导航逻辑，提升单页应用（SPA）的用户体验。

核心 API 介绍

• history.back()：返回上一页（等同于点击浏览器后退按钮）
• history.forward()：前往下一页（等同于点击浏览器前进按钮）
• history.go(n)：跳转到历史记录中的第 n 页（n 可为负数）
• history.pushState() 与 history.replaceState()：用于在不刷新页面的情况下修改历史记录

基础使用示例

// 后退一页
history.back();

// 前进一页
history.forward();

// 自定义按钮触发
document.getElementById('btn-back').addEventListener('click', () => {
  history.back();
});

document.getElementById('btn-forward').addEventListener('click', () => {
  history.forward();
});

注意事项

- 调用 back() 或 forward() 不会触发页面刷新，但会触发 popstate 事件。
- 若历史栈中无对应记录（如刚打开页面就点后退），操作将无效。
- 在 SPA 中，通常需结合 pushState 手动管理路由状态。