在不刷新页面的情况下将网页添加到浏览器历史记录

Question

我的页面包含一个表单，当用户提交表单时，调用一个JavaScript函数并动态呈现给用户一个新的表单。

此时，我希望用户能够单击浏览器的后退按钮并返回到第一个表单。这可能吗？

---

谢谢快速响应，但我遇到了使用pushState的问题。在单击后退按钮后，HTML仍然显示“第二个表单”。

以下是我用来测试它的代码：

<script>
function newPage(){
    history.pushState({state:1}, "State 1", "?state=1");
    document.getElementById('formBox').innerHTML="second form";
}
</script>


<input type="button" onclick="newPage();" value="forward" />
<div id='formBox'>first form</div>

- twiz

Answer 1

var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");

有关文档的相关链接。

- Elliot Bonneville

---

如果您不介意在旧版浏览器中出现错误，那么这是可以的。 - Michael Robinson

@MichaelRobinson（但主要是给未来找到这个答案的开发者），这样的功能目前应该被视为增加更好用户体验的不错补充。没有返回选项的不便并不会破坏网站，可以实现后备措施，例如beforeunload事件。随着浏览器的发展，这应该是正确的答案，因为它使用了原生JavaScript。 - Joseph Marikle

我知道这段代码和你写的一样，但是你知道stateObj有什么作用吗？foo:和"bar"的目的是什么？ - Luke

@Luke stateObj 可以包含任何你想要的内容。当你使用 history.back()、history.forward() 或 history.go(target)（其中 target 是整数或完整/部分 URL），或者用户使用浏览器的后退按钮时，你可以访问该 stateObj。例如：window.onpopstate = function(event) { alert(JSON.stringify(event.state)); https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onpopstate - Buttle Butkus

Elliot，我认为你还需要将@Buttle的评论添加到你的答案中。他们两个一起帮了我很多。 - Bhargav Rao

Answer 2

我已经使用HTML5 History/State API和History.js实现了类似的行为，其描述如下:

为所有HTML5浏览器提供跨兼容性体验（它们都稍微不同地实现了HTML5历史记录API，导致不同的行为和有时出现的错误 - History.js修复了这些问题，确保体验在整个HTML5浏览器中都是预期的/相同的/很棒的）

示例：

History.pushState({state:1}, "State 1", "?state=1");

- Michael Robinson

---

这是原生JS功能，不需要用库。 - Elliot Bonneville

同意，但是historyjs非常方便。 - MilkyWayJoe

这似乎是正确的答案，但我有点困惑如何在点击“返回”按钮后恢复原始表单。当我点击“返回”时，它仍停留在页面上，但第二个表单仍然存在。 - twiz

你可以将任何数据存储在History.pushState函数的第一个参数中，即一个object对象。在处理状态变化的代码中，你需要使用这些信息手动恢复页面到先前的状态。 - Michael Robinson