HTML5 历史 API 实现

Question

这听起来像是重复的，但我已经搜索了论坛的问题，但没有找到我要找的东西。

所以，我已经阅读了一段时间，但我仍然无法决定接下来的情况该怎么办。我正在构建一个需要流畅用户界面的单页网站（不是我的第一个网站），因此我决定使用 AJAX 加载页面以获得更好、更友好的导航。

我一直在使用：SmartAjax；有一段时间，这对我来说已经足够了。它工作得很好，我对它没有任何问题，但它在处理大量 JavaScript 作为回调时遇到了问题。在整个网站上实现它时，还有很多工作要做。

因为现在 HTML5 比一年前更加稳定，并且它的大部分功能在大多数浏览器中都可以使用（但有些仍然需要 polyfill），我决定开始使用 HTML5 History API。很多网站都使用它，而且很容易做到，但有些地方我不明白。

因此，这就是我想知道的：

• 现在所有浏览器都支持吗？最重要的是，触控设备和手机是否支持它？
• 是否有专门的库或框架？
• 对于小型网站（最多 6 页）但使用大量 JavaScript 是否安全？
• 在与 jQuery 插件结合使用时它的表现如何？
• hashbang 和 hashes 怎么样？它们与使用 History API 不一样吗？有什么区别？

我将不胜感激有关上述要点的所有帮助和信息。

Answer 1

浏览器支持

Forget it。甚至 IE 9 都不支持history.pushState。移动浏览器也不是很安全。但是有一个库（见下文）使这种不兼容性对开发人员完全透明。

图书馆

嗯，在纯 HTML 5 环境中，历史 API 非常简单。对于其他人来说，history.js 库已经引起了相当多的关注，而且它提供了对旧哈希写入的自动回退

在小型网站上

那么，你最好把你的 JavaScript 和你的潜在状态组织起来。但如果是这样，我认为没有问题。

历史 & jQuery & 插件

我现在已经在几个项目中同时使用了这两者。我还没有发现使用 jQuery 和 jQuery 插件有任何问题，除了 - 当然 - 与注入 HTML 相关的典型问题（即必须重新启动事件处理程序；$(document).ready() 在某些环境中可能工作也可能不工作，等等）。

哈希与 history.pushState

Hash-Notation 已被用作一种解决方法（或如今，回退）。使用 history.pushState 时变得没有必要。

我发现主要区别在于，地址栏中的 URL 始终可以被服务器直接理解，尤其是用于书签或链接共享目的。如果您有http://example.org/#/my/fancy/site，那么您的索引页面将必须解析哈希（通过javascript，因为您无法访问哈希服务器端），然后注入/重定向到my/fancy/site。

但是，如果使用 history.pushState，浏览器的地址栏会显示http://example.org/my/fancy/site - 这是直接可路由的。

（并且，想象一下通过电话向某人拼写哈希或哈希爆炸 URL！）

希望能澄清一些或您对历史的疑虑！我强烈推荐 History.js 作为首选库。

Answer 2

我更愿意将 HTML5 History 用于支持它的浏览器（所有当前浏览器和即将推出的 IE10），而对旧版本仅使用静态（非 Ajax）链接。随着浏览器的更新，您的网站会自动变得更好。

由于哈希的严重缺点（例如，不包含 URL 的哈希部分的无意义的引用，因此使统计信息相当无用），我不建议使用哈希 polyfill。