JavaScript 返回到上一页的三种常用方法
在网页开发中，实现“返回上一页”功能非常常见。JavaScript 提供了多种方式来实现，下面详细介绍三种最常用且可靠的方法，并附带优缺点对比和使用场景。
方法一：history.back()（最常用，推荐）
// 直接返回上一页，等同于点击浏览器“后退”按钮
history.back();
// 或者
history.go(-1);说明：
history.back()和history.go(-1)效果完全相同。- 会触发浏览器的历史记录后退，页面状态（如表单填写、滚动位置）通常能保持（取决于浏览器实现）。
示例（按钮点击返回）：
<button onclick="history.back()">返回上一页</button>优点：
- 简单、直观。
- 用户体验最好，模拟真实后退行为。
- 支持页面状态恢复。
缺点：
- 如果当前页是历史记录的第一页，会无效（不会跳转）。
方法二：history.go(-1)（等同于 back）
history.go(-1); // 后退一步
// history.go(-2); // 后退两步
// history.go(1); // 前进一步说明：
history.go(n)中的 n 是整数，正数前进，负数后退。- 与
history.back()完全等价，只是写法不同。
使用场景：
- 需要动态控制后退步数时更灵活。
方法三：window.location.href = document.referrer（根据来源页跳转）
if (document.referrer) {
window.location.href = document.referrer;
} else {
// 如果没有来源页（比如直接打开），跳转到指定页面
window.location.href = '/index.html';
}说明：
document.referrer返回引发当前页面跳转的上一个页面的 URL（字符串）。- 直接设置
location.href实现跳转。
完整安全示例：
<button onclick="goBack()">返回上一页</button>
<script>
function goBack() {
if (document.referrer && document.referrer !== window.location.href) {
window.location.href = document.referrer;
} else {
// 备选方案：跳转到首页或指定页面
window.location.href = '/';
}
}
</script>优点：
- 可以明确知道要跳转到哪个页面。
- 在某些单页应用（SPA）中更可控。
缺点：
- 如果用户是通过直接输入 URL、书签或搜索引擎进入当前页，
document.referrer会为空。 - 不会保留浏览器历史栈的“后退”状态（属于新跳转）。
- 跨域时 referrer 可能被屏蔽（受 Referrer-Policy 影响）。
三种方法对比总结
| 方法 | 代码 | 是否模拟浏览器后退 | referrer 是否为空时行为 | 是否保留页面状态 | 推荐度 |
|---|---|---|---|---|---|
| history.back() / go(-1) | history.back() | 是 | 无效（停留在当前页） | 通常保留 | ★★★★★ |
| history.go(-1) | history.go(-1) | 是 | 无效 | 通常保留 | ★★★★★ |
| document.referrer | location.href = referrer | 否（新跳转） | 需要手动处理备选页面 | 不保留 | ★★★ |
最佳实践建议
- 大多数场景优先使用
history.back()：
<button onclick="history.back()">返回</button>- 需要兼容无来源页的情况，结合 referrer：
function goBack() {
if (history.length > 1) {
history.back();
} else {
window.location.href = '/'; // 跳转到首页
}
}- 移动端或单页应用（Vue/React） 中常用
history.back()，配合路由守卫更优雅。
总结：99% 的情况下，直接使用 history.back() 就是最佳选择，简单可靠，用户体验最好。
