作者：是时候公布另一个月的 Dev Derby 了，今年八月份，我们希望您能体验一下 History API。History API 是构建现代 Web 应用中必不可少的一部分，以下是一些原因：
链接很有用，它们让 Web 运转起来
Web 由相互链接的网站构成。您访问某个网站并阅读 HTML 文档，您点击链接或提交表单，浏览器就会将您重定向到另一个页面。这非常棒，因为它可以实现一些功能：
- 您始终可以获得一个独特的地址，可以将其加入书签并分享给朋友，让他们看到您之前访问的页面
- 您可以在做错事的时候使用浏览器的后退按钮，回到之前的页面
- 搜索引擎喜欢链接并通过链接访问您的网站
为什么只改变了一小部分内容就需要加载整个页面？
当然，这也会带来一些困扰，主要是每次执行简单的操作都需要离开页面并下载一个全新的文档及其链接资源。由于这在 Web 的过去即使在黑暗时代也花费了太长时间，我们找到了解决方案，例如框架，它只加载网站的一部分而不是整个文档。这首次破坏了书签和历史记录后退功能。另一个重要的事情当然是要让 Flash 网站可加入书签并允许在其中使用后退按钮（您可能还记得 JavaScript 确认框会弹出，询问“您真的要离开此页面吗？”）。
当 AJAX 出现时，我们完全破坏了浏览器的书签和历史记录。这是一个问题，因为我们的访客已经习惯了在发生错误时点击后退按钮（承认吧，您也曾不止一次在 Gmail 中刷新页面或点击后退按钮）。我们需要对此进行修复。据我所知，Mike Stenhouse 在 2005 年率先提出解决方案，该方案利用 URI 的片段标识符存储信息，并使用隐藏的 iframe 元素播种历史记录。该解决方案被封装到多个库中，例如 YUI 历史记录管理器 和 jQuery 历史记录插件。
使用“hashbang URL”破坏 Web
随着 Twitter 和 Gawker Media 等一些网站放弃真实 URL 而采用 hashbang URL，破坏链接和浏览会话历史记录的问题也随之加剧。因此，您不再可以通过 http://twitter.com/codepo8 访问我的个人资料，而是点击 Twitter 上的我的个人资料链接会将您带到 http://twitter.com/#!/codepo8。由于 Twitter 是一个大量使用 JavaScript 的应用程序，使用后者进行导航被认为更有效 - Twitter 只需通过 JavaScript 加载我的个人资料的新内容即可。这为他们节省了大量流量，但也使链接依赖于 JavaScript，这意味着搜索引擎不会跟踪这些链接。对于 Twitter 来说，这不是问题，但当 Gawker 将所有博客迁移到使用 hashbang 而不是重新加载页面的格式时，另一个脚本中的一个简单的 JavaScript 错误导致许多博客出现重大故障。但是，hashbang URL 成为人们真正想要的工具，用于创建快速加载的应用程序和页面，而不是一遍又一遍地重新加载页面。
hashbang URL 非常脆弱，许多人 对它们 表示担忧。并非所有 Web 上的用户代理都启用了 JavaScript，这意味着您的网站甚至无法被它们访问。这包括搜索引擎蜘蛛，因此 Google 提出了一项关于如何使 Ajax 网站可抓取的提案，甚至 发布了一整套规范。顺便说一下，Facebook 的虚荣 URL 也使用 JavaScript 重定向，这就是为什么我的 URL 是“document.location.href”。
解决方案：History API 和服务器重定向
因此，我们现在有了 HTML5 中的 History API，可以替代使用 hashbang 并破坏 Web 和非常基本的浏览器使用模式。它允许您动态更改浏览器工具栏中的 URL 并将其添加到历史记录中，而无需重新加载页面。您可以兼得两全 - 您可以在页面中进行原子更新，并为用户留下真正的、可用的 URL，以便他们可以访问、加入书签并分享给朋友。History API 被许多大型网站使用，Facebook 允许使用后退按钮，Flickr 在其灯箱视图中使用它。但是，最酷的实现是 GitHub 及其 Tree Slider
是不是很酷？您可以浏览整个页面，它在几毫秒内加载完毕，而不是几秒钟，并且您可以随时点击后退按钮或复制粘贴 URL。
现在轮到您了，向我们展示您使用 History API 可以做什么！以下是一些参考资料：
参考资料
- Mozilla 开发者网络中的 History API
- Dive into HTML5 中对 History API 的详细解释
- WHATWG 中 History API 的详细规范
- Remy Sharp 制作的简单 History API 演示
- Facebook 如何使用 History API
- Syd Lawrence 制作的带有 History 支持的 jQuery Fancy Box
- History.js - History API 支持的填充器
女士们先生们，请启动您的编辑器，向我们展示如何创造历史！
关于 Chris Heilmann
HTML5 和开放 Web 的传道者。让我们一起修复它！
5 条评论