使用 AJAX 处理用户导航

Question

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

Main -> AJAX Content -> Main

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

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

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

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

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

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

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

Answer 1

手动推送历史记录对您有用吗？类似的东西：

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 浏览器

火狐 4+ 铬 8+ 歌剧 11.5 Safari 5.0+ Safari iOS 4.3+

HTML4 浏览器

IE 6、7、8、9 火狐 3 歌剧 10, 11.0 野生动物园 4 Safari iOS 4.2、4.1、4.0、3.2