使用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));
};

有关详细信息，请参阅有关onpopstate事件的MDN页面。

Answer 2

要检测后退按钮，请绑定到popstate事件：

$(window).bind("popstate", function(e) {
    var state = e.originalEvent.state;
    if ( state === null ) { 
        console.log("step one");
    } else { 
        console.log(state.foo);
    }
});