单页面应用程序中的后退按钮处理？

Question

类似的问题here已被注意到！

我有一个完全基于DHTMLX工具包（偶然的神话般的东西）的SPA。一个严重的用户体验问题是后退按钮处理：没有。

他们的论坛推荐'任何js路由库来处理URL散列中的应用程序状态并将其恢复。

我很困惑，因为SPA只有最简单的HTML，完全是Javascript，并且通过WebSockets进行大多数通信......这是否意味着我必须在每个按钮上单击/按键存储状态？

所以，...

1. 是否面板对最佳实践的建议？
2. 有一个现有的库，将做到这一点？
3. 如果说图书馆的例子很简单，任何人都可以提供一个基本的方法吗？

非常感谢

Answer 1

DHTMLX是建设SPA的一个伟大的框架。像所有SPA一样，后退按钮只需将用户从应用程序中取出即可。用户也无法收藏任何内容。

所以你想要做的就是使用javascript的pushState()这将允许你控制网址。

例如，假设您展示一个搜索屏幕去记录。用户输入搜索条件并按下搜索。您通过ajax带来结果并更新网格。然后用户选择该行，然后转到详细信息页面（此处为典型的搜索功能）。

在这一点上，你可能需要使用pushState()的网址更改为类似：
http:/me.com/search/23432

这将允许用户书签的页面。然后，当用户离开详细信息页面时，请使用pushState()并将url设置为http:/me.com/search

因此，您可以完全控制网址。

您需要学习的下一件事是popState()。这个函数在URL改变时被调用。所以假设用户按书签去“23432”。 popState()将被调用，你会作出相应的反应。

这基本上是简而言之：pushState()和popState()。

一些旧浏览器不会对pushState/popState做出反应。有些库可以用来处理使用url散列的旧浏览器。我不太熟悉他们，因为我只支持html5浏览器。