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

Question

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

原因是我需要知道状态移动之前的 URL（从我要移动到的状态）。根据项目包含的 gist，仅查看我们访问的 URL。

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

谢谢

Answer 1

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

var manualStateChange = true;

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

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

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

Answer 2

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

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

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

我用非常简单的方法解决了这个问题：
监听 statechange 事件并告诉浏览器在触发时刷新。这样我就不在乎他们是否后退或前进离开此页面。如果浏览器认为状态正在更改（链接不会触发 statechange 事件），则只有后退/前进到历史记录状态页面才会触发此事件，因此它解决了问题。

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

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

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

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

Answer 3

我最终使用 History.pushState 管理所有链接，这样就不需要区分按下的后退按钮。我们以相同的方式处理所有状态更改。

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

Answer 4

在“官方”版本中，此功能不可用。尝试在 main while 中使用此文件：
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 issues 47。

Answer 5

与詹姆斯·瓦格纳的答案类似。
'statechange' 事件是双向触发的，所以我只检查 'popstate' 事件，在我的例子中，只有当用户返回时才会调用该事件。

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