0

我有一个简单的单页 webapp,它遵循以下执行流程

Main -> AJAX Content -> Main

用户从主屏幕开始,输入一些输入数据并按下按钮。这将启动 AJAX 内容,它本质上是一个按顺序排列的几个不同步骤的集合。完成所有步骤后,用户重新开始主屏幕。

我想处理当用户在“AJAX 内容”状态下按下后退按钮时会发生什么。这是我想要的状态图-

Main (Push Main) -> AJAX Content (Pop Main)->  Main

因此,当用户处于 AJAX 状态时,按下后退按钮,用户将被带回主屏幕。完成活动并返回主屏幕后,后退按钮将用户带离站点。

注意:所有项目都只是一个 HTML 页面。我使用“主要”和“AJAX 内容”这两个词来说明用户将看到的不同屏幕。

我尝试使用真正简单的历史、PathJS 和 jQuery BBQ 来实现这个功能。他们都没有成功。我需要一种简单的方法来将项目推送和弹出到导航堆栈上,并在用户使用后退按钮时对它们做出反应。

我主要为移动平台开发,在这些平台上做这一切真的很容易。我不知道如何为网络应用程序执行此操作。代码片段将不胜感激。

4

1 回答 1

2

手动推送历史对你有用吗?类似的东西:

window.history.pushState(stateObj, "Title", "URL");

它还支持一些导航方法以及您最应该欣赏的东西:

window.onpopstate = eventHandlerRef;

这里有一篇非常好的文章:https ://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history

现在这一切都很好,但遗憾的是在某种程度上取决于您的目标平台 - 对 pushState 方法和事件的支持不是太广泛 - http://caniuse.com/#feat=history - 两个站点都链接到 History.js几乎涵盖了支持的polyfill。来自https://github.com/browserstate/history.js

HTML5 浏览器

Firefox 4+ Chrome 8+ Opera 11.5 Safari 5.0+ Safari iOS 4.3+

HTML4 浏览器

IE 6、7、8、9 Firefox 3 Opera 10、11.0 Safari 4 Safari iOS 4.2、4.1、4.0、3.2

于 2012-12-03T10:49:51.820 回答