javascript - 使用 AJAX 处理用户导航

Question

我有一个简单的单页 Web 应用程序，它遵循以下执行流程

Main -> AJAX Content -> Main

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

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

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

因此，当用户处于 AJAX 状态时，按下后退按钮，用户将返回主屏幕。完成事件并返回主屏幕后，后退按钮将使用户离开网站。

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

我尝试使用Really Simple History、PathJS 和 jQuery BBQ 来实现此功能。他们都没有成功。我需要一种简单的方法来将项目推送和弹出到导航堆栈上，并在用户使用后退按钮时对它们使用react。

我主要为移动平台进行开发，在移动平台上做这一切都非常容易。我不知道如何为网络应用程序执行此操作。代码片段将受到高度赞赏。

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+ Chrome 8+歌剧 11.5Safari 5.0+Safari iOS 4.3+

HTML4 浏览器

IE 6、7、8、9火狐3歌剧 10, 11.0狩猎4Safari iOS 4.2、4.1、4.0、3.2