JavaScript实现返回到上一页的三种方法

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

三种方法对比总结

最佳实践建议

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

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

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

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

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

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

到此这篇关于JavaScript实现返回到上一页的三种方法的文章就介绍到这了,更多相关JavaScript返回到上一页内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！