如何使浏览器后退按钮带您返回 AJAX 调用

本文关键字：返回 AJAX 调用 按钮 何使 浏览器 | 更新日期: 2023-09-27 17:55:57

我有一个页面上有很多动态生成的复选框。当用户单击这些复选框时，页面上的许多内容都会通过 ajax 动态更改。最终用户抱怨说，在点击提交然后点击后退按钮更改某些内容后，他们的选择被吹走了，他们必须重新做一遍。

我见过一些网站（gmail，facebook等）使用URL中的哈希符号来破解后退按钮，以便它执行AJAX调用，而不是返回到上一个整页请求。我想这样做是为了在页面提交之前修改 URL，以便点击后退按钮将加载他们之前选择的字段。

例如：

在Gmail中，如果我正在查看收件箱，那么我的URL如下所示：https://mail.google.com/mail/?shva=1#inbox

然后，如果我单击"已发送邮件"，则会执行 AJAX 调用，并将我的 URL 修改为如下所示：https://mail.google.com/mail/?shva=1#sent

我真的很喜欢这种行为，并想复制它。这是如何实现的？

  1. 您的链接是否实际上触发了任何javascript，或者它们只是链接到具有适当哈希符号信息的URL？

  2. 你如何在javascript中读取哈希符号信息？

  3. 这种类型的导航如何影响搜索引擎？搜索引擎是否会知道除了哈希后的信息之外相同的两个URL实际上是不同的URL，并将它们作为索引？

  4. 我应该考虑这种技术的其他优点和缺点是什么？

注意：我正在使用带有 ASP.NET Web 窗体和 ASP.NET MVC 3.0 的 C#，以防万一。

如何使浏览器后退按钮带您返回 AJAX 调用

要操作主题标签，请查看location.hash（javascript）。

您还将对HTML 5中的新推送/pop状态感兴趣 https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history。

GitHub 为此做了一些非常酷的事情。在 https://github.com/blog/760-the-tree-slider 查看他们的树滑块功能的博客条目。

http://tkyk.github.com/jquery-history-plugin/还有jQuery历史插件。（编辑：我看到乔打败了我）。

看看

我过去使用过的jquery历史插件 http://tkyk.github.com/jquery-history-plugin/，它可能会做你想做的事。

JQuery 插件：http://tkyk.github.com/jquery-history-plugin/

我过去使用过的另一个jQuery库：

jQuery BBQ：Back Button & Query Library

此外，如果您不需要它的所有功能，并且只为您提供所有浏览器的哈希更改事件，则以前的版本更加缩小：

jQuery hashchange event

注意：仅作为上述库的简要介绍。较新的（支持 HTML5）浏览器原生支持哈希更改事件，在这种情况下，脚本将仅绑定到该事件。对于不支持该事件的旧版浏览器，该脚本会创建一个轮询循环来模拟该事件。在任一情况下，您都可以绑定到事件并适当地处理。

编辑：要回答您的问题：

  1. 链接不会触发javascript，链接只是使用哈希更改URL。hashchange 事件监视此操作，当哈希更改（记录在浏览器历史记录堆栈中）时，将触发事件。
  2. location.hash用于读取哈希值，以及从该点开始需要的任何适当分析。
  3. 可能不够精通SEO来给你一个完整的答案，但相当确定搜索引擎不会索引哈希。
  4. 这种技术的优点是可用性，因为您的用户将能够正确使用他们的后退按钮。此外，任何history.back(0) javascript 调用也可以正常工作（我不喜欢它们，但人们使用它们）。缺点是，在最初开发时，您可能会遇到一些古怪的错误，具体取决于代码的编写方式。总而言之，我认为通过使用插件，大部分跑腿工作已经从流程中移除，这是出于可用性目的的好方法。
相关文章：