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

Question

类似的问题here已注意到!

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

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

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

所以，...

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

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

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

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

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