启用后退按钮作为 Ajax 应用程序中的“撤消”按钮答案

【问题标题】：Enabling the Back button to act as an 'undo' button in an Ajax app启用后退按钮作为 Ajax 应用程序中的“撤消”按钮
【发布时间】：2010-10-08 00:33:05
【问题描述】：

我在尝试使用浏览器的“后退”和“前进”按钮时遇到了一个 Ajax 应用程序问题。我正在使用 jQuery History 插件来启用浏览器历史记录。

该应用由一个产品页面组成。有一个排序栏，使用户能够按各种值对产品进行排序。用户可以选择产品服装类别（连衣裙、上衣、下装、裙子等）、子类别部门（裙子：迷你、超长、高腰、波西米亚风/嬉皮士等）、尺码（XS SML XL XXL XXXL）、颜色（白色、黑色、灰色、蓝色、红色等），以及时代和材料。

大多数选项是通过使用 Ajax 将最新选择的选项加载到适当的 DIV 来启用的。

例如，要选择黑色，将执行以下代码

$('#colorSort').load('colorSort.php?color=Black');

那么如果用户选择棕色：

$('#colorSort').load('colorSort.php?color=Brown');

那么如果用户取消选择黑色：

$('#colorSort').load('colorSort.php?colorRemove=Black');

只要我们不需要支持后退/前进按钮就可以正常工作，但是当通过 jQuery History 添加后退按钮功能时，我们会遇到问题。例如：使用我们之前的示例，用户选择了黑色和棕色。现在假设用户单击后退按钮。用户希望他们的棕色选项被删除，但事实并非如此，因为正在加载的 URL 是：

colorSort.php?color=Black,

而不是

colorSort.php?colorRemove=Brown

这就是它需要的。

我尝试通过将一组“撤消”参数附加到查询字符串来解决此问题。比如，

colorSort.php?color=Brown//colorRemove=Brown

在双斜杠之前包含当前查询字符串，在斜杠之后包含“后退”查询字符串。所以使用这段代码，如果我知道点击了一个新链接，我可以加载当前的查询字符串（在斜杠之前），如果我知道点击了后退按钮，我可以加载斜杠后面的“后退”查询字符串.

但问题是似乎没有任何方法可以检测是否单击了后退/前进按钮。 jQuery History 在 hashchange 事件下运行，并且该事件对于触发它的事件没有区别（据我所知）。

这是我的问题。如果 StackOverflow.com 的超级聪明人能帮助我找到解决方案，我将不胜感激。谢谢！

【问题讨论】：

长话短说，您无法控制浏览器的后退和前进按钮，即使您可以 AJAX 请求不会存储在浏览器的历史记录中，这就是它们是异步的原因。使用您自己的用户选择历史实现您自己的后退按钮。
看到这个问题：stackoverflow.com/questions/3791466/…
正如 Ben 所说，您无权访问它。但是，您有更好的东西：更改和侦听散列值更改的能力。围绕这个概念构建您的页面，您将拥有浏览器原生的 AJAX 来回。

【解决方案1】：

查看jquery bbq（后退按钮和查询）。它允许您通过使用浏览器的标准历史实现存储状态来准确实现您想要的。然后它使用 hashChange 事件（支持时，不支持时一些技巧）在感兴趣的事情发生时触发操作（即单击链接或单击返回按钮）

这样您可以单击一个链接，它会在您的页面上添加一个新的哈希参数，您可以获取该参数并相应地加载数据。当您回击时，它会获取参数的先前值，并像以前一样加载，并在可能的情况下进行缓存。这是一种简单化的解释，并不完全正确，但足够接近简要概述。

【讨论】：

这本质上是 jQuery History 的工作原理。我遇到的问题是，当 hashchange 事件触发时，它会将哈希传递给我的回调函数，但我可能需要修改 URL 数据，具体取决于哈希是否因用户单击新链接或用户是否单击而更改返回键。 bbq 是否让我有能力确定这一点？
我不相信它有区别......抱歉，一开始显然错过了你的 Q 点。

【解决方案2】：

添加一个隐藏字段来存储颜色值。第一次更改颜色时，将值添加到隐藏的表单字段中。

检查每次改变颜色的条件

如果您按下返回按钮并返回

如果隐藏字段有值，则使该隐藏字段中的颜色变为颜色

在这种情况下是棕色

否则如果隐藏字段为空默认颜色为黑色。

我希望这会奏效。

由于页面未提交会话无法使用。

【讨论】：