JavaScript 返回到上一页的三种常用方法

说明：

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

三种方法对比总结

最佳实践建议

1. 移动端或单页应用（Vue/React） 中常用 history.back()，配合路由守卫更优雅。

需要兼容无来源页的情况，结合 referrer：

function goBack() {
    if (history.length > 1) {
        history.back();
    } else {
        window.location.href = '/'; // 跳转到首页
    }
}

大多数场景优先使用 history.back()：

<button onclick="history.back()">返回</button>

总结：99% 的情况下，直接使用 history.back() 就是最佳选择，简单可靠，用户体验最好。