使用history.pushState后如何检测浏览器的返回按钮

Question

我有一个三阶段的登录表单，在进度推进时显示/隐藏页面内容。当用户从第一步进入第二步时，我调用以下代码：

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

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

现在，我正在尝试捕获后退按钮的点击事件，以便根据需要隐藏/显示内容（例如返回到第1阶段）。

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

- SB2055

---

可能是history.pushstate失败浏览器的后退和前进按钮的重复问题。 - Jose Gómez

Answer 1

您可以使用 onpopstate 事件。

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

要获取更多信息，请查看有关onpopstate事件的MDN页面。

- bigblind

---

根据文档，每当pushstate在同一文档中的两个状态之间发生更改时，事件就会被触发。状态的更改对于后退按钮和前进按钮都有效，因此这应该适用于两者。 - bigblind

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

- Ben Grimm