22

我有一个使用 Backbone 和 Zepto 开发的单页移动应用程序。

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

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

我有一个添加到 body 元素的类，navigate-back它会翻转这种行为，所以当用户使用浏览器的后退按钮导航回来时，他们会看到内容从左侧滑入，而其他内容滑入右侧。基本上与前进相反。

我需要检测用户是否正在向后导航，以便我可以调用替代行为。我尝试过实现自己的历史堆栈，但我遇到了很多问题，有时它将前向导航标记为后向导航，从而破坏了视觉提示。它现在变成了一堆黑客，如果我发布它可能只会让我尴尬。

实现我自己的历史堆栈的最佳方法是什么，以便我可以检测用户是否在单页 Backbone 移动应用程序的上下文中向前/向后导航？

4

5 回答 5

22

我不了解backbone.js 1，但我帮助开发了一个必须在html5中实现这种行为的移动应用程序，所以我应该能够给出一些好的建议：

首先，很高兴知道该history.pushState功能存在。它最大的问题是它支持到 android 2.3，但不支持 android 3 直到 android 4.0.3。正如 kiranvj 正确指出的那样，这可以通过使用流行的history.js库来解决，该库为缺少历史记录功能提供了一个 polyfill 解决方案。

现在，解决您的实际问题，我实现历史方向动画的方式是向pushState函数 ( history.pushState(data,title,url)) 添加数据，通过该函数我确定了页面的逻辑位置。在我的应用程序中，我不仅限于水平条，而且在您的情况下，您将跟踪任何新加载页面的位置，该位置比当前页面高一个。例如

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

接下来，当window.onstatechangeorwindow.onanchorchange事件触发时，您观察该位置是高于还是低于当前页面（例如，通过使用我在上面使用的history.js History.getState()函数），并根据此决定向哪个方向移动（下到左，右高），如下图所示：

历史事件的插图

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

希望这会有所帮助，如果您有任何其他问题，请随时提出。

请注意，此答案假定您正在使用history.js ，如果您想构建自己的解决方案，则需要监听稍微不同的事件（例如onpopstate）并使用稍微不同的结构（history而不​​是）。History

还需要注意的是，可以使用您自己的队列数组来构建它，这可以为您提供更多控制，但不能与浏览器的后退按钮结合使用。这是浏览器站点的一个大问题，但是如果您正在构建一个cordova（又名phonegap）Web 应用程序，则要容易得多。

1 刚读过它，它似乎做了一些自己的历史处理，这可能会使集成上述技术变得更加复杂。

于 2012-06-05T08:25:42.850 回答
1

在移动设备上使用单页 - 多视图使用 Zepto 时，我遇到了同样的问题。

最初我使用 html5 statechange 和 onhashchange。在一个或其他移动设备中都有一些问题。最后我从这里使用了 Zepto 历史插件https://github.com/browserstate/history.js

它在一定程度上解决了大部分问题。试试看，它会很有用，它尽可能处理 html4 和 html5 功能。

于 2012-06-03T05:11:58.493 回答
1

如果您正在开发一个真正的单页应用程序，为什么不设置一个数组来将历史 url 保存在 js 变量中（而不是依赖类似的东西history.pushState及其支持）？

每当导航到新页面时，您都可以将其 url 推送到数组中，每当按下“后退”按钮时，您都可以检索所需的 url，只要您想要。只要您在用户返回几步然后导航到新链接时正确丢弃 url，这将完美地工作。

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

更新：

经过进一步研究，上述方法不适用于页面重新加载，因为它是在通过 JS 可用的历史处理之外发生的操作。它仍可用于跟踪向后/向前转换，但在导航到应用程序外部的 url 或页面刷新时，此类历史记录将丢失。David Mulder 的答案似乎缺乏这种限制，因为它依赖于在页面范围之外持续存在的浏览器级历史记录。

于 2012-06-06T23:28:39.610 回答
0

在单页移动应用程序中使用这个东西，这将允许历史记录并将用户移回。

function onBackKeyDown() {
    history.go(-1);
    navigator.app.backHistory();
}
于 2015-11-27T13:36:35.347 回答
-2

Sammy.js 的 v.6.x 分支（仅依赖于哈希更改的分支）是一种完美、最简单、最兼容浏览器的历史记录方法。在那里，根本不跟踪历史，因为 Sammy 只是监视 hashchange。

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

剥离每个页面视图的最后一部分（幻灯片编号），推入全局。在新路线上，查看数字是否大于或小于存储在全局中的数字并执行正确的（左或右）动画。如果 global 未定义，则没有动画。

于 2012-06-09T20:00:52.817 回答