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 影响）。

三种方法对比总结

最佳实践建议

1. 移动端或单页应用（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() 就是最佳选择，简单可靠，用户体验最好。