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。






