如何在单页移动 Web 应用程序中实现我自己的历史堆栈? [英] How to implement my own history stack in a single page mobile web application?
问题描述
我有一个用 Backbone 和 Zepto 开发的单页移动应用程序.
它与浏览器中的后退/前进按钮一起正常工作.
当用户导航到一个页面时，新内容从右侧滑入，而旧内容滑向左侧(并滑出视口).如果用户按下前进"浏览器按钮，我希望发生同样的事情.这一切都有效.
我有一个添加到 body 元素的类 navigate-back 将翻转这种行为，所以当用户使用浏览器的后退按钮导航时，他们会看到内容滑动 back 从左边进入，其他内容从右边滑入.基本上与前进相反.
我需要检测用户是否向后导航，以便我可以调用替代行为.我曾尝试实现我自己的历史堆栈，但我遇到了很多问题，有时它将前进标记为 后退 导航，这会破坏视觉提示.它现在陷入了一堆黑客攻击，如果我发布它可能只会让我感到尴尬.
实现我自己的历史堆栈以便我可以检测用户是否在单页 Backbone 移动应用程序上下文中向前/向后导航的最佳方法是什么?
我不知道backbone.js1，但我帮助开发了一个移动应用程序，它必须完全实现这种行为在 html5 中，所以我应该可以给出一些好的建议:
首先很高兴知道 history.pushState 函数存在.不过它的大问题是 并且您需要收听如果您想构建自己的解决方案，则使用稍微不同的事件(例如 onpopstate)并使用稍微不同的结构(history 而不是 History).
还需要注意的是，可以使用您自己的队列数组来构建它，这可以为您提供更多控制权，但不能与浏览器的后退按钮结合使用.这是浏览器站点的一个大问题，但是如果您正在构建 cordova(又名phonegap) 网络应用程序.
<小时>1 刚刚阅读它，它似乎做了一些历史处理自己的，这可能使集成上述技术变得更加复杂.
I have a single-page mobile application developed with Backbone and Zepto.
It works correctly with the back/forward buttons in the browser.
When the user navigates to a page, the new content slides in from the right as the old contents slides away to the left (and out of the viewport). I want the same thing to happen if the user presses the "forward" browser button. This all works.
I've got a class that I add to the body element navigate-back that will flip this behaviour, so when the user navigates back with the browser's back button, they see the content sliding back in from the left and the other content sliding into the right. Basically just the opposite of going forward.
I need to detect if the user is navigating backwards so I can invoke the alternate behaviour. I have tried implementing my own history stack, but I've ran into lots of problems where sometimes it marks a forward as a back navigation which ruins the visual cue. It's descended into a kludge of hacks now and probably would only embarrass me if I posted it.
What is the best way to implement my own history stack so I can detect if the user is navigating forward/back in the context of a single-page Backbone mobile application?
I don't know about backbone.js1, but I have helped develop a mobile application which had to implement exactly this behavior in html5, so I should be able go give some good advice:
First of all it's good to know that the history.pushState function exists. The big problem with it though is that it is supported up to android 2.3, but not on android 3 till android 4.0.3. As kiranvj points out correctly this can be solved by using the popular history.js library which provides a polyfill solution for the lack of the history functionality.
Now, getting to your actual problem, the way I implemented the history direction animations was by adding data to the pushState function ( history.pushState(data,title,url) ) with which I identified the logical position of the page. In my application I wasn't only limited to a horizontal bar, but in your case you would keep track of position where any new loaded page get's a position which is one higher then your current page. E.g.
History.pushState({position:History.getState().data.position+1},"Your title","Your URL");
Next, when the window.onstatechange or window.onanchorchange event triggers you observe whether the position is higher or lower than your current page (e.g. by using the history.js History.getState() function which I used above) and depending on this you decide in which direction to move (lower is to the left, and higher is to the right), as is illustrated by the image below:
You will also note that I already assumed on the first page that you have {position:1}, whereas normally the first page will have no state information. The way this can be achieved is by using history.replaceState which replaces the current empty state with a more informative state. Alternatively you can also check for an empty state on any of the previously mentioned events and if it's empty you assume it to be the left most one ({position:1}).
Hope this helps and if you have any additional questions feel free to ask.
Please note that this answer assumes you are using history.js and you would need to listen to slightly different events (such as onpopstate) and use slightly different structures (history rather than History) if you would want to build your own solution.
It is also useful to note that it is possible to build this with your own queue array which gives you a lot more control, but will not work in combination with the browser's back button. This is a big issue with browser sites, however is far easier in case you are building a cordova (a.k.a. phonegap) web application.
1 Just read about it and it appears to do some history handling of its own, which might make it more complex to integrate the technique described above.
这篇关于如何在单页移动 Web 应用程序中实现我自己的历史堆栈?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
