History.js 中有没有办法知道何时按下后退按钮答案

【问题标题】：Is there a way in History.js to know when the back button was pressedHistory.js 中有没有办法知道何时按下后退按钮
【发布时间】：2012-01-02 21:47:35
【问题描述】：

我已经开始测试History.js。在了解它是如何工作的并且没有popstate 之后，而是有statechange。我正在寻找一种在按下浏览器的后退按钮时有所不同的方法。

原因是我需要在状态移动之前知道 URL，从我要去的那个。使用项目包含的gist，只查看我们访问的 URL。

我希望解决方案不是在全局变量中跟踪访问的最新 URL。

谢谢

【问题讨论】：

标签： javascript browser-history history.js

【解决方案1】：

我最终使用History.pushState 管理所有链接，这样就无需按下后退按钮。我们以相同的方式处理所有状态变化。

编辑： 在 History.js 的 Github 中发现了这两个问题，可能会对某人有所帮助。 https://github.com/browserstate/history.js/issues/70 https://github.com/browserstate/history.js/issues/47

【讨论】：

【解决方案2】：

我知道这是一个过时的问题，但我想出了一个解决方案，以解决在标准页面和历史状态页面之间切换时后退/前进按钮的问题。

场景：在一组页面上使用 HTML5 History（或 history.js 插件）然后我们需要真正加载的其他页面，也就是标准页面（不要问为什么，但在某些用例中可能需要这样做）

当您从历史状态页面转到标准页面时。您不能返回：它会更改 url，但不会加载页面——它只会触发 statechange；我认为这是原始帖子的问题。我个人认为这是一个浏览器错误（不过所有浏览器都有这个问题），因为浏览器应该知道您所在的页面是在历史状态页面之外重新加载的。

我用一些非常简单的方法解决了这个问题：监听 statechange 事件并告诉浏览器在触发时刷新。这样，我不在乎他们是否返回或离开此页面。如果浏览器认为状态正在发生变化（链接不会触发 statechange 事件），则只有后退/前进 INTO 历史状态页面会触发此事件，从而解决问题。

代码，使用 jQuery + History.js 插件：

$(window).on('statechange', function() {
    window.location.reload();
});

如果这没有意义，您可能没有遇到此问题。但是，我在许多确实使用 HTML 5 历史记录的网站上注意到了这一点（如果您在图像模式上重新加载然后尝试返回，即使 pinterest.com 也会出现此问题）。

希望，如果你确实有这个问题，你会找到这个答案并松一口气:)

【讨论】：

我也想过类似的逻辑，但是当发出 pushState 和按下后退/前进时会触发 statechange，这会创建无限的重新加载循环。
确实，一个巨大的解脱。我正要放弃。

【解决方案3】：

我发现 github 上的解决方案对于我的目的来说有点过头了。我创建了一个始终为 true 的 bool，除非在我使用 History 更改状态之前。

var manualStateChange = true;

History.Adapter.bind(window,'statechange',function(){
    if(manualStateChange == true){
     // BACK BUTTON WAS PRESSED
    }
    manualStateChange = true;
});

每当我以编程方式更改状态时，将 bool 设置为 false：

manualStateChange = false;
History.pushState(null, null, currentPath);

【讨论】：

我做了同样的事情，但这不会区分“后退”和“前进”按钮。
这正是我所需要的，谢谢:D ...我只需要// BACK BUTTON PRESSED 位中的location.reload()，所以“后退”和“前进”不是问题 :D
我同意@GTCrais 的观点，即这不会区分“后退”和“前进”按钮。因此，在您的代码中注释 // BACK BUTTON WAS PRESSED 具有误导性。你应该把它改成// BACK OR FORWARD BUTTON WAS PRESSED。

【解决方案4】：

在“官方”版本中，此功能不可用。尝试在 main 中使用此文件： https://github.com/danger89/history.js/blob/master/scripts/bundled/html5/jquery.history.js

我不能保证他的解决方案适用于所有浏览器。但这是一个很好的解决方案。如果您应用了他的更改，您可以使用：

var State = History.getState();
if (State.navigation) {
    // Back / forward button is pressed.
}

更多信息请访问Github issue 47。

【讨论】：

【解决方案5】：

与詹姆斯瓦格纳的答案相似。 'statechange' 事件是双向触发的，所以我只检查 'popstate' 事件，在我的情况下，它仅在用户返回时调用。

window.addEventListener('popstate', function() {
  window.location.reload();
});

【讨论】：