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

Question

已注意到类似的问题here！

我已经获得了一个完全基于DHTMLX工具包的SPA（偶然的神话般的东西）。一个严重的UX问题是后退按钮处理：没有。

他们的论坛建议使用任何js路由库来处理url哈希中的应用状态，然后将其恢复原状。

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

所以，......

1. 专家组是否对最佳做法有任何建议？
2. 是否有现有的库可以执行此操作？
3. 如果上述图书馆的示例很简单，那么任何人都可以提供基本的操作方法吗？

非常感谢

Answer 1

Dhtmlx是构建SPA的一个很好的框架。与所有SPA一样，后退按钮只会将用户从应用程序中删除。用户也无法将任何内容加入书签。

所以你要做的就是使用javascript的pushState()来控制网址。

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

此时，您需要使用pushState()将网址更改为：
http:/me.com/search/23432

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

所以你可以完全控制网址。

您需要了解的下一件事是popState()。当URL更改时，将调用此函数。因此，假设用户按下书签以转到“23432”。 popState()将被调用，您将做出相应的反应。

基本上简单来说就是pushState()和popState()。

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