JavaScript返回到上一页的三种方法
JavaScript 返回到上一页的三种常用方法
在网页开发中，实现“返回上一页”功能非常常见。JavaScript 提供了多种方式来实现，下面详细介绍三种最常用且可靠的方法，并附带优缺点对比和使用场景。
方法一：history.back()（最常用，推荐）
// 直接返回上一页，等同于点击浏览器“后退”按钮 history.back();// 或者 history.go(-1);说明：
history.back()和history.go(-1)效果完全相同。- 会触发浏览器的历史记录后退，页面状态（如表单填写、滚动位置）通常能保持（取决于浏览器实现）。
示例（按钮点击返回）：
<buttononclick="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实现跳转。
完整安全示例：
<buttononclick="goBack()">返回上一页</button><script>functiongoBack(){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 | 否（新跳转） | 需要手动处理备选页面 | 不保留 | ★★★ |
最佳实践建议
- 移动端或单页应用（Vue/React） 中常用
history.back()，配合路由守卫更优雅。
需要兼容无来源页的情况，结合 referrer：
functiongoBack(){if(history.length >1){ history.back();}else{ window.location.href ='/';// 跳转到首页}}大多数场景优先使用history.back()：
<buttononclick="history.back()">返回</button>总结：99% 的情况下，直接使用 history.back() 就是最佳选择，简单可靠，用户体验最好。
