浏览器历史管理

Question

我正在尝试找到一个干净的解决方案，以最有效的方式处理浏览器历史记录。 （我用的是 GWT，不过这个问题确实比这更笼统。）

这是我的情况（我认为这很标准）：

我有一个 Web 应用程序，它有几个不同的页面/地点/位置（无论你想怎么称呼它），我会根据浏览器历史记录的更改显示这些应用程序。除了通常是静态 HTML 页面的“主页”、“功能”、“联系人”等之外，还有一个“用户”部分，人们可以在其中登录他们的用户帐户和（我们称之为）“项目”部分，用户可以在其中处理他们的项目。

所以，现在我只使用名为 #Home、#Features、#Contact 等的本地链接，以及 #User、#Project 以访问不同的页面。一切都很好，除了以下情况：

如果有人打开链接#Project，例如，该人会看到一个项目登录对话框。这个登录对话框有一个 cancel 按钮，我想通过从我的应用程序中调用浏览器的 back 按钮来实现它（很简单）。我想这样做的原因有两个：

1. 您可以从应用程序中的多个不同位置以及您的书签访问此登录对话框，通过这种方法，我无需跟踪用户来自何处。
2. 更重要的是：如果我确实记得用户来自哪里（例如 #Home）并将用户“前进”链接到该位置，我会得到以下效果：
   • 假设用户访问#Home，然后#Features，然后点击项目登录。
   • 如果用户点击 cancel 按钮，我将他“转发”到 #Features，然后点击浏览器的 back 按钮将返回登录对话框，然后再次返回 #Features，最后返回 #Home。不是你所期望的。
   • 相反，您希望立即返回 #Home，这正是我通过浏览器的返回功能实现 cancel 所得到的结果。

此时一切都很好，除非用户最初通过指向 #Project 的直接书签链接进入此登录对话框。因为那时，如果我只是简单地 cancel = back，用户就会从页面完全返回到他的浏览器的起始页面或他之前所在的任何地方。所以，在这种情况下，我确实需要将“转发”链接到 #Home。

现在，我尝试了几种方法来解决这个问题，并提出了一些解决方案，但没有一个对我来说是非常理想的，但还是让我分享一下，也许可以激发一些创造力：

• 首次打开页面时，获取历史令牌。如果是 #Project 或 #User 或任何其他触发可取消对话框的内容，请将以下项目放入历史堆栈：#Home、#Project，其中最后一个是保存的初始令牌。然后，这允许我的 cancel 按钮正常工作......一次......但是，如果用户随后点击 back，他将再次获得登录对话框（因为原始历史令牌仍在历史堆栈中，我不知道如何清除它）。点击 cancel 然后会将他从页面上移除（不一致的行为）。
• 我可以改为将 #+++、#Home、#Project 放到堆栈上，这样我就可以捕获一个back 点击，通过检测 #+++ 链接并简单地将 #Home 标记重新添加到堆。这将解决问题并且总体上工作得很好，除了我讨厌那些不让你在没有足够快地敲击后退按钮的情况下让你退出它们的网站......
• 如果我能以某种方式跟踪历史堆栈的长度，就我的应用程序中的位置而言，最干净的解决方案是。一开始很容易：它上面有一个项目。但是，如果我得到如下的一系列位置：#Home、#Features、#Home？用户是否单击返回回到#Home，即浏览器中的历史现在长度为1，或者他是否单击了#Home em> 链接，即历史长度为 3？我检测这一点的想法是：
  • 定义，#Home 与 #home 相同。
  • 让页面中的所有链接仅链接到大写版本的链接。
  • 每当您收到以 大写字母，立即在历史记录中添加两个项目， 第一个以小写字母开头，第二个也以大写字母开头。 IE。 #Home 变成 #Home、#home、#Home。
  • 如果您收到以小写字母开头的历史更改，您就知道用户只是单击了 back 而不是链接，您只需单击 back 两次更多次让他真正回到上一页。
  • 现在您可以区分“后向”和“前向”链接，并在代码中维护准确的历史模型。
  • 但是，不幸的是，这有两个问题：第一，浏览器历史记录变得杂乱无章（不是很优雅），第二，如果用户单击 返回 kbd> 足够快，以至于您的应用没有时间对消息做出反应。

这似乎应该是一个非常普遍的问题，我希望你们中的一个人可以为我指出一个比我迄今为止的想法更有用的方向。

Answer 1

在您的用户可以访问#LOGIN 对话框之前，您的入口点类已执行。在本课程中，您可以记住最后已知的页面。在登录活动/演示者中，您可以添加一个浏览器历史事件处理程序，它检查最后一个已知位置是否为空。如果为 null，则将用户发送到 #HOME 页面。

您无需询问浏览器用户访问过您应用中的哪些位置。如果您愿意，您可以记住每个会话的全部历史记录：即 [#HOME, #LOGIN, #FEATURES, #HOME]。

Answer 2

你有一个Queue<String> historyQueue; 怎么样？

当页面第一次加载时，即onModuleLoad()，你初始化Queue。 当您捕获历史事件时，请检查它是返回还是新的历史令牌。 如果是后退，则将其从队列中弹出，如果是新的，则将其添加到队列中。这样，取消按钮只是一个token = historyQueue.pop() 并检查令牌是否为空。如果是，那么就像你说的back = cancel，那么就做适当的事情吧。

Answer 3

window.history 有一个length 属性，它将显示当前选项卡的历史记录中有多少条目。不幸的是，它不可过滤（所以没有办法说window.history.localURLs.length）。

如果您几乎完全在客户端执行此操作（即部分更新、很少的整页加载、使用哈希或history.(push|pop)State API），那么您可能需要考虑将客户端路由框架合并到您的应用程序，以避免重新发明轮子。