使用 Ajax 历史记录和书签时，使用“#！”总是好的吗？而不仅仅是“#”？

Posted 2023-02-22

【中文标题】使用 Ajax 历史记录和书签时，使用“#！”总是好的吗？而不仅仅是“#”？

【英文标题】：When using Ajax History and Bookmark, is it always good to use "#!" instead of just "#"?

【发布时间】：2011-03-21 07:53:37

【问题描述】：

Facebook 正在使用 #! 而不是 URL 中的 # 来处理 Ajax 历史记录（后退和前进按钮）和书签。这样做总是一个好主意吗，因为我认为通常的锚点可能会干扰 Ajax 历史机制以触发它处理普通锚点。

因此，Ajax History 函数只会在看到 #! 而不是 # 时才处理哈希部分。

并且使用! 与主流浏览器兼容吗？如果 Facebook 使用的是!，则猜测它可能会得到很好的支持。

【参考方案1】：

请参阅 Google 的 Making AJAX Applications Crawlable 了解可能的用例（不知道这是否是 Facebook 使用此片段的原因）。

【参考方案2】：

更新：此答案已被此 article 取代。它讨论了 Hashbang (#!)、Hashes (#) 和 HTML5 History API（pushState、popState）的问题和解决方案。

关于您网站的可用性，没关系，您可以使用任何您喜欢的东西。

关于搜索引擎优化，拥有它和不拥有它都提供了不同的途径。

例如，Facebook 使用 !根据Google Proposal for Making Ajax Applications Crawlable。添加！会告诉谷歌它应该监听那个 ajax 请求并将那个 url 添加到搜索引擎结果中。这对于已经实现 ajax 的网站非常有用，因为您需要做的就是添加 !。

这样做的缺点是它只解决了使您的 ajax 可抓取的问题。它不能解决以下问题：

为 Ajax 和非 Ajax 用户保持 URL 的干净和一致。例如。你最终可能会得到 www.facebook.com/profile.php?pid=123#!profile.php?pid=123 保持网站可供非 Ajax 用户访问。 保持 Ajax 和非 Ajax 用户的 URL 相同。 需要一些非常复杂的服务器端更改来转义和转换与查询字符串有关的状态。 它与旨在真正解决这些问题的新 html5 PopState 功能不兼容。

对于目前不使用 ajax 的网站，由于上述问题，最好不要使用 Google 提案，因为它仅适用于像 facebook 这样疯狂的 ajax 并且需要绝望的 SEO 解决方案的网站。有一些替代方案可以解决更多这些问题（现在可用的 HTML5 PopState 可以解决所有问题）。一个这样的替代方案是jQuery Ajaxy（如balupton.com 所示），它通过简单地将您的网站升级到ajax 应用程序来工作，同时保持启用Ajax 的丰富和交互的体验，并继续为禁用Ajax 的用户完美工作。