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

Question

类似的问题here已经注意到了!

我有一个完全基于 DHTMLX 工具包的 SPA(顺便说一句，很棒的东西)。一个严重的用户体验问题是后退按钮处理:没有。

他们的论坛推荐“任何 js 路由库来处理 url 哈希中的应用程序状态并将其恢复”。

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

所以，...

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

非常感谢

Answer 1

Dhtmlx 是构建 SPA 的绝佳框架。与所有 SPA 一样，后退按钮只会让用户直接退出应用程序。用户也不能为任何内容添加书签。

因此，您要做的是使用 javascript 的 pushState()，这将允许您控制 url。

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

此时，您可能希望使用 pushState() 将 url 更改为:
http://me.com/search/23432

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

因此您可以完全控制 url。

接下来您需要学习的是popState()。当 url 更改时调用此函数。因此，假设用户将书签推送到“23432”。 popState() 将被调用，您将做出相应的 react 。

简而言之，基本上就是这样:pushState() 和 popState()。

一些较旧的浏览器不会对 pushState/popState 作出 react 。有一些库可以使用 url 哈希来处理旧浏览器。我对它们不太熟悉，因为我只支持 html5 浏览器。