js实现 前进后退

使用 window.history API 实现前进后退

window.history 提供了操作浏览器会话历史的接口，可以直接调用其方法实现前进后退功能。

前进
使用 history.forward() 方法加载历史列表中的下一个页面，相当于用户点击浏览器的前进按钮。

history.forward();

后退
使用 history.back() 方法加载历史列表中的上一个页面，相当于用户点击浏览器的后退按钮。

history.back();

跳转指定步数
通过 history.go() 方法可以跳转到相对于当前页面的特定位置。正数表示前进，负数表示后退。

history.go(1);  // 前进一页
history.go(-1); // 后退一页
history.go(0);  // 刷新当前页

监听历史记录变化

通过 popstate 事件可以监听用户手动触发的历史记录变化（如点击浏览器前进/后退按钮）。
注意：仅 history.pushState() 或 history.replaceState() 触发的路径变化不会触发此事件。

window.addEventListener('popstate', (event) => {
  console.log('当前历史记录状态:', event.state);
});

动态修改历史记录

使用 history.pushState() 和 history.replaceState() 可以动态添加或修改历史记录，而不会触发页面刷新。

添加新记录
pushState 会向历史堆栈添加一条新记录：

history.pushState({ page: 1 }, 'Page 1', '/page1');
// 参数说明: (状态对象, 标题, URL)

替换当前记录
replaceState 会修改当前历史记录而不添加新条目：

history.replaceState({ page: 2 }, 'Page 2', '/page2');

完整示例：SPA 路由控制

以下是一个单页应用（SPA）中通过历史记录管理路由的示例：

// 初始化路由
function handleRoute(path) {
  console.log('加载路由:', path);
}

// 监听 popstate 事件
window.addEventListener('popstate', (e) => {
  handleRoute(window.location.pathname);
});

// 导航函数
function navigate(path, state = {}) {
  history.pushState(state, '', path);
  handleRoute(path);
}

// 使用示例
document.getElementById('backBtn').addEventListener('click', () => history.back());
document.getElementById('forwardBtn').addEventListener('click', () => history.forward());
document.getElementById('homeBtn').addEventListener('click', () => navigate('/'));

注意事项

1. 安全性限制

   • 无法直接读取其他页面的历史状态，仅能操作当前会话的路径部分。
   • 修改的 URL 必须与当前页面同源（同协议、域名、端口）。

2. 标题参数

   • pushState 的标题参数目前被大多数浏览器忽略，未来可能支持。

3. Hash 模式兼容
   对于老旧浏览器，可以使用 window.location.hash 实现类似效果：

   window.addEventListener('hashchange', () => {
     console.log('Hash 变化:', window.location.hash);
   });