javascript - 使用 history.pushState 后检测浏览器后退按钮

Question

我有一个三阶段登录表单，可以随着进度显示/隐藏页面上的内容。当用户从第 1 步前进到第 2 步时，我调用以下命令:

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

我看到浏览器后退按钮已启用。

现在，我正在尝试捕捉后退按钮的点击，以便我可以相应地隐藏/显示内容(例如 - 返回到第 1 阶段)。

在这种情况下如何检测浏览器后退按钮？我不想更改 URL，我只想在用户回击时调用一些 JS 函数。我的目标是现代桌面/移动浏览器。

Answer 1

您可以使用 onpopstate 事件。

window.onpopstate = function(event) {
  alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
};

有关详细信息，请参阅 the MDN page about the onpopstate event.