使用 history.pushState 后检测浏览器后退按钮答案

【问题标题】：Detecting Browser Back Button after using history.pushState使用 history.pushState 后检测浏览器后退按钮
【发布时间】：2015-01-31 20:30:48
【问题描述】：

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

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

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

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

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

【问题讨论】：

history.pushstate fails browser back and forward button的可能重复

标签： javascript jquery html

【解决方案1】：

您可以使用onpopstate 事件。

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

欲了解更多信息，请参阅the MDN page about the onpopstate event.

【讨论】：

根据文档，每次pushstate在同一个文档中的两个状态之间发生变化时都会触发该事件。后退按钮和前进按钮的状态都会发生变化，所以这应该适用于两者。

【解决方案2】：

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

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

【讨论】：