Javascript 如何在单页移动web应用程序中实现我自己的历史堆栈？

我有一个使用主干网和Zepto开发的单页移动应用程序

它与浏览器中的后退/前进按钮一起正常工作

当用户导航到页面时，新内容从右侧滑入，而旧内容从左侧滑出（并滑出视口）。如果用户按下“前进”浏览器按钮，我希望发生同样的事情。这一切都有效

我在body元素

中添加了一个类，该类将翻转此行为，因此当用户使用浏览器的“后退”按钮返回时，他们会看到内容从左侧滑回，其他内容滑入右侧。基本上与前进正好相反

我需要检测用户是否正在向后导航，以便调用替代行为。我曾尝试实现自己的历史堆栈，但我遇到了很多问题，有时它会将前进标记为后退导航，从而破坏视觉线索。现在它已经变成了一堆乱七八糟的黑客，如果我发布它，可能只会让我难堪

实现我自己的历史堆栈以便检测用户是否在单页主干移动应用程序的上下文中向前/向后导航的最佳方法是什么？
在使用单页-多视图的移动设备上使用Zepto时，我遇到了相同的问题

最初我使用html5 statechange和onhashchange。在一个或其他移动设备中都存在一些问题。最后，我在这里使用了Zepto历史插件

它在某种程度上解决了大部分问题。试试看，它会很有用，它尽可能地处理html4和html5功能。
我不知道主干.js1，但我帮助开发了一个移动应用程序，它必须在html5中实现这种行为，所以我应该能够给出一些好的建议：

首先，最好知道
history.pushState
函数存在。但最大的问题是。正如kiranvj正确指出的，这可以通过使用流行的库来解决，该库为缺少历史功能提供了polyfill解决方案

现在，谈到您的实际问题，我实现历史方向动画的方法是将数据添加到
pushState
函数（
history.pushState（数据、标题、url）
）中，我用它标识页面的逻辑位置。在我的应用程序中，我不仅限于一个水平条，而且在您的情况下，您将跟踪任何新加载页面的位置，该位置比当前页面高一个。例如

History.pushState({position:History.getState().data.position+1},"Your title","Your URL");

接下来，当
window.onstatechange
或
window.onanchorchange
事件触发时，您可以观察位置是否高于或低于当前页面（例如，通过使用我上面使用的
History.getState（）
函数），并根据这一点确定移动方向（左下，右上）如下图所示：


您还将注意到，我已经在第一页假设您有
{position:1}
，而通常第一页没有状态信息。实现这一点的方法是使用
历史记录。replaceState
，它将当前的空状态替换为更具信息性的状态。或者，您也可以检查前面提到的任何事件的空状态，如果它是空的，则假定它是空的最左边的一个（
{position:1}
）

希望这有帮助，如果你有任何其他问题，请随时提问

请注意，此答案假设您正在使用，并且如果您想构建自己的解决方案，您需要收听稍有不同的事件（例如
onpopstate
），并使用稍有不同的结构（
history
，而不是
history
）

还需要注意的是，可以使用您自己的队列数组来构建此队列，这会给您带来更多的控制，但与浏览器的“后退”按钮结合使用时将不起作用。这对于浏览器站点来说是一个大问题，但如果您正在构建（也称为）web应用程序，则更容易实现


我刚刚读过它，它似乎做了一些历史处理，这可能会使集成上述技术变得更加复杂。
如果您正在开发一个真正的单页应用程序，为什么不设置一个数组来保存js变量中的历史URL呢（与依赖类似于
history.pushState
及其支持的东西相反）

无论何时导航到新页面，您都可以将其url推送到数组中，无论何时按下“后退”按钮，您都可以检索所需的url，只要用户返回几步后正确放弃url，然后导航到新链接，这将非常有效

我从未尝试过将其实现为用于页面历史记录，但这对于页面内撤消重做逻辑非常有效

更新：
经过进一步研究，上述方法不适用于页面重新加载，因为这是一个在JS提供的历史处理之外发生的操作。它仍然适用于跟踪向后/向前转换，但在导航到应用程序外部的url或页面刷新时，这类历史将丢失。David Mulder的答案似乎不正确这种限制依赖于页面范围之外的浏览器级历史记录。
Sammy.js的v.6.x分支（仅依赖哈希更改的分支）是一种完美、最简单、最兼容浏览器的历史记录跟踪方法。在这种情况下，历史记录根本不被跟踪，因为Sammy只关注哈希更改

依靠“#/slide/123”可以支持硬页面重新加载，并简化工作

剥离每个页面视图上的最后一部分（幻灯片编号），推入全局。在新路线上，查看编号是否大于或小于当前编号
function onBackKeyDown() {
    history.go(-1);
    navigator.app.backHistory();
}