js 实现后退

使用 window.history.back()

JavaScript 提供的 window.history.back() 方法可以模拟浏览器的后退按钮功能，返回上一页。

function goBack() {
  window.history.back();
}

调用 goBack() 即可实现后退功能。

使用 window.history.go()

window.history.go() 方法允许指定后退的步数，负数为后退，正数为前进。

function goBack() {
  window.history.go(-1); // 后退一页
}

监听按钮点击事件

在 HTML 中绑定按钮点击事件，触发后退操作。

document.getElementById('backButton').addEventListener('click', function() {
  window.history.back();
});

HTML 部分：

<button id="backButton">返回</button>

检查历史记录是否存在

在调用后退前，可以先检查历史记录是否可后退。

function goBack() {
  if (window.history.length > 1) {
    window.history.back();
  } else {
    alert('无法后退，已经是第一页');
  }
}

使用 history.pushState() 自定义后退逻辑

如果需要自定义后退行为，可以结合 history.pushState() 和 popstate 事件。

// 添加历史记录
window.history.pushState({ page: 1 }, 'Page 1', '?page=1');

// 监听后退事件
window.addEventListener('popstate', function(event) {
  if (event.state && event.state.page === 1) {
    // 自定义后退逻辑
    console.log('返回 Page 1');
  }
});

兼容性说明

以上方法在现代浏览器中均支持，包括 Chrome、Firefox、Edge 和 Safari。如需兼容旧版浏览器，建议测试或使用 Polyfill。