JavaScript history 对象-代码号

history 对象：掌控浏览器的前进后退

浏览器的“后退”和“前进”按钮，我们每天都会用到。在JavaScript中，控制这两个按钮行为的，就是 history 对象。它记录着当前窗口（或标签页）的浏览历史，允许我们通过代码实现页面的导航。

history 的本质：一个访问记录栈

history 对象可以理解为一个“访问记录栈”。每当你点击一个链接、在地址栏输入网址并跳转，或者在代码中调用 location.href 进行跳转，当前页面的URL就会被压入这个栈中。history 对象就是操作这个栈的工具。

需要注意的一个细节：history 对象是 window 的属性，所以它属于BOM的一部分。访问方式也很简单：

window.history  // 完整写法
history         // 简写，效果相同

history 的属性

history 对象的属性不多，但有一个很实用：

属性	说明
`length`	返回历史记录列表中的条目数量。这个数字包括当前页面，如果用户刚打开一个标签页，`history.length` 的值为1

示例：获取当前窗口的历史记录数量

<script>
function showHistoryLength() {
    alert("当前窗口的历史记录条数为：" + history.length);
}
</script>
<input type="button" value="查看历史记录条数" onclick="showHistoryLength()" />

个人见解：history.length 在判断用户是否是从其他页面跳转过来时有用。比如你想实现“如果没有历史记录就不显示返回按钮”的效果，可以通过判断 history.length <= 1 来实现。但要注意，history.length 不包括跨域页面的详细记录，只是一个数量统计。

history 的三个核心方法

history 对象只提供了三个方法，但基本覆盖了所有导航需求。

1. back() —— 后退一页

这个方法模拟用户点击浏览器工具栏的“后退”按钮，加载历史列表中的上一个页面。

示例：添加一个自定义后退按钮

<script>
function goBack() {
    history.back();
}
</script>
<input type="button" value="← 返回上一页" onclick="goBack()" />

2. forward() —— 前进一页

模拟浏览器的“前进”按钮，加载历史列表中的下一个页面。如果当前页面已经是“新”的页面（即没有可前进的记录），调用此方法不会产生任何效果。

示例：添加一个自定义前进按钮

<script>
function goForward() {
    history.forward();
}
</script>
<input type="button" value="→ 前进到下一页" onclick="goForward()" />

3. go() —— 跳转到指定页面

go() 方法是最灵活的一个，它接受一个整数参数，表示在历史记录中跳转的步数。

history.go(1) 等同于 history.forward()
history.go(-1) 等同于 history.back()
history.go(2) 表示前进两步
history.go(-3) 表示后退三步
history.go(0) 表示重新加载当前页面

示例：一个带步数选择的导航器

<script>
function jumpInHistory() {
    let steps = document.getElementById("stepInput").value;
    let numSteps = parseInt(steps);
    
    if (!isNaN(numSteps)) {
        history.go(numSteps);
    } else {
        alert("请输入有效的数字，例如 1、-2、0 等，来自代码号学习编程");
    }
}
</script>
<input type="text" id="stepInput" placeholder="输入步数，如 -1 后退一步" />
<input type="button" value="跳转" onclick="jumpInHistory()" />

实际应用场景与注意事项

场景一：自定义导航栏

很多移动端H5页面会自己实现顶部导航栏，隐藏浏览器自带的工具栏。这时候就需要用 history.back() 来实现返回功能，配合 history.length 判断是否显示“关闭”按钮。

个人经验：在开发这类自定义导航时，我一般会先判断 document.referrer 是否为空，再结合 history.length 来决定返回按钮的行为。如果用户是直接输入URL进来的，history.length 为1，此时调用 history.back() 不会跳转到外部页面，只会停留在当前页面，体验上反而不够自然。

场景二：单页应用的路由管理

在单页应用（SPA）中，虽然路由切换通常由前端框架处理，但浏览器的历史记录依然需要维护。很多路由库（如 React Router、Vue Router）的底层，就是利用了 history 对象的 pushState() 和 replaceState() 方法，这两个是HTML5新增的API，比传统的 back、forward、go 更精细，允许我们操作历史记录而不触发页面刷新。

场景三：用户引导与流程控制

假设你做的是一个分步骤的表单流程，用户填完第一步进入第二步，这时可以在第二步页面提供一个“返回上一步”按钮，调用 history.back() 让用户回到第一步修改内容。这种方式比硬编码跳转链接更可靠，因为用户进入第二步的方式可能不止一种（可能是正常跳转，也可能是刷新后自动恢复状态），而 history.back() 始终返回到用户实际来源的那个页面。

本节课程知识要点

方法/属性	用途	返回值	适用场景
`length`	获取历史记录数量	数字	判断页面是否有历史可回退
`back()`	后退一页	无	自定义返回按钮
`forward()`	前进一页	无	自定义前进按钮
`go()`	跳转指定步数	无	精确控制跳转步数，如“后退两步”

个人经验笔记：

优先使用 go() 而不是 back() 和 forward()：go() 的通用性更强，参数为 -1 时等同于 back()，代码风格更统一。团队协作时，统一用 history.go(-1) 比混用两个方法更易维护。
不要依赖 history 做数据存储：历史记录只是URL栈，不要在URL里放敏感信息，也不要把业务数据塞进URL参数里当存储用，用户一个后退操作就可能让这些数据丢失。
跨域限制：出于安全考虑，JavaScript无法读取跨域页面的完整历史记录内容，只能知道 length 和执行导航操作。这是浏览器的同源策略在保护用户隐私。
移动端适配：在iOS的Safari中，如果页面是直接通过“添加到主屏幕”打开的，history.back() 的行为可能和预期略有不同，建议在真机上测试后再上线。

了解 history 对象，不只是学会调用这三个方法，更重要的是理解浏览器“前进后退”背后的机制。在项目中，合理运用这些方法，能让页面的导航体验更流畅，也更符合用户的操作习惯。

本文标签：

JavaScript history 对象