如何实现#！基于链接？答案

【问题标题】：How to implement #! based links?如何实现#！基于链接？
【发布时间】：2011-11-06 08:35:38
【问题描述】：

我一直想知道如何在 URL 中使用 # 或 #! 即时浏览页面。许多像谷歌这样的网站都在 http://www.google.com/nexus/ 上使用它，当用户点击任何链接时，没有任何变化，并且会立即打开，只有 URL 发生变化，例如：www.example.com/#contact 或 www.example.com/#home

如何处理我的 8 个页面？（主页、功能、价格、联系方式、支持）

【问题讨论】：

@JaidevSridhar 检查 hashbang 的标签描述。 “具有网络爬虫支持的基于 AJAX 的网络应用程序的 URL 约定。”还原，因为这是使用的术语。

标签： javascript jquery html dom hashbang

【解决方案1】：

您可能想查看基本的 AJAX 教程（例如 http://marc.info/?l=php-general&m=112198633625636&w=2）。 URL 使用 #! 的真正原因是让他们被谷歌索引。如果您希望 Google 将 AJAX 化的 URL 编入索引，则必须实现对 _escaped_fragment_ 的支持（请参阅：http://code.google.com/web/ajaxcrawling/docs/specification.html）。

【讨论】：

【解决方案2】：

使用它的唯一原因是在 url 中显示 AJAX 增强页面的状态。这样，您可以复制网址并将其添加为书签以恢复到相同的状态。

旧版浏览器不允许您在不重新加载页面的情况下更改地址栏中的 url。最新的浏览器可以（搜索PushState）。要解决此问题，您可以更改 url 的哈希值。这是通常用于跳转到锚点的部分，但您可以使用 JavaScript 将其用于其他目的。

! 对于此过程并非绝对必要。 ! 由 Google 实现。它允许对这些 url 进行索引。通常哈希不会单独索引，因为它们仅标记同一页面（锚点）的不同部分。但是通过添加!，您创建了一个shebang 或hashbang，已被 Google 索引。

这里不一一解释，搜索 Ajax、HashBang 和 PushState 应该会发现很多信息。

补充：检查History.js。它是 PushState api 的包装器，它回退到在旧浏览器上使用哈希。

【讨论】：

这个PushState 功能听起来很有趣...+1 :)
这很酷，但请注意，它只适用于最新的浏览器（我认为是 FF5+、Chrome 11，不确定 IE9）。
添加了一个关于 History.js 的内容，这使您的实施更加容易。 github.com/balupton/History.js