javascript - HTML5 历史 API 实现

Question

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

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

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

因为现在 HTML5 比一年前更稳定，而且它的大部分功能都可以在大多数浏览器中运行(但有些仍然需要 polyfill)，我决定开始使用 HTML5 History API。很多网站都在使用它，而且使用起来非常简单，但有些方面我不太了解。

因此，这是我想知道的:

• 现在是否所有浏览器都支持它，最重要的是，触摸设备和移动设备是否支持它？
• 是否有专门的库或框架？
• 使用大量 JavaScript 的小型网站(最多 6 页)安全吗？
• 它与 jQuery 插件结合使用时是否表现良好？
• hashbang 和 hashes 怎么样？它们与使用 History API 不一样吗？有什么区别？

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

Answer 1

浏览器支持

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

图书馆

好吧，在纯 HTML 5 环境中，历史 API 非常简单。对于其他人，history.js库得到了相当多的关注，而且它提供了对旧散列写入的自动回退

在小型网站上

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

历史与 jQuery 与插件

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

哈希与 history.pushState

Hash-Notation 已被用作一种变通方法(或如今的后备方法)。使用 history.pushState 时就没有必要了。

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

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

(并且，想象一下通过电话向某人拼出一个散列或散列 URL!)

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