755

我刚刚注意到我们习惯的冗长而复杂的 Facebook URL 现在看起来像这样:

http://www.facebook.com/example.profile#!/pages/Another-Page/123456789012345

据我所知,今年早些时候它只是一个普通的类似 URL 片段的字符串(以 开头#),没有感叹号。但现在它是 shebang 或 hashbang ( #!),我以前只在 shell 脚本和 Perl 脚本中看到过。

新的Twitter URL 现在也包含这些#!符号。例如,Twitter 个人资料 URL 现在如下所示:

http://twitter.com/#!/BoltClock

现在是否#!在 URL 中扮演了一些特殊的角色,比如对于某个 Ajax 框架或什么,因为新的 Facebook 和 Twitter 界面现在主要是 Ajaxified?
在我的 URL 中使用它会以任何方式使我的 Web 应用程序受益吗?

4

6 回答 6

489

这种技术现在已被弃用

用于告诉谷歌如何索引页面。

https://developers.google.com/webmasters/ajax-crawling/

这项技术大部分已被使用与 HTML5 一起引入的 JavaScript History API 的能力所取代。对于类似 的 URL www.example.com/ajax.html#!key=value,Google 将检查该 URLwww.example.com/ajax.html?_escaped_fragment_=key=value以获取非 AJAX 版本的内容。

于 2010-06-09T20:07:25.070 回答
221

octothorpe/number-sign/hashmark 在 URL 中具有特殊意义,它通常标识文档的某个部分的名称。准确的说法是散列后面的文本是 URL 的部分。如果您使用 Wikipedia,您会看到大多数页面都有一个目录,您可以使用锚点跳转到文档中的部分,例如:

https://en.wikipedia.org/wiki/Alan_Turing#Early_computers_and_the_Turing_test

https://en.wikipedia.org/wiki/Alan_Turing标识页面并且Early_computers_and_the_Turing_test是锚点。Facebook 和其他 Javascript 驱动的应用程序(如我自己的Wood & Stones)使用锚点的原因是他们希望使页面可收藏(正如对该答案的评论所建议的那样)或支持后退按钮而无需从服务器

为了支持书签和后退按钮,您需要更改 URL。但是,如果您将页面部分(使用类似的window.location = 'http://raganwald.com';内容)更改为不同的 URL 或未指定锚点,浏览器将从 URL 加载整个页面。在 Firebug 或 Safari 的 Javascript 控制台中试试这个。加载http://minimal-github.gilesb.com/raganwald。现在在 Javascript 控制台中,键入:

window.location = 'http://minimal-github.gilesb.com/raganwald';

您将看到来自服务器的页面刷新。现在输入:

window.location = 'http://minimal-github.gilesb.com/raganwald#try_this';

啊哈!没有页面刷新!类型:

window.location = 'http://minimal-github.gilesb.com/raganwald#and_this';

仍然没有刷新。使用后退按钮查看这些 URL 是否在浏览器历史记录中。浏览器注意到我们在同一页面上,但只是更改了锚点,因此它不会重新加载。由于这种行为,我们可以有一个单一的 Javascript 应用程序,它在浏览器看来是在一个“页面”上,但有许多尊重后退按钮的可书签部分。当用户进入不同的“状态”时,应用程序必须更改锚点,同样如果用户使用后退按钮或书签或链接来加载包含锚点的应用程序,应用程序必须恢复适当的状态。

所以你有了它:Anchors 为 Javascript 程序员提供了一种机制,用于制作可书签、可索引和后退按钮友好的应用程序。这种技术有一个名字:它是一个单页界面

ps 这种技术还有第四个好处:通过 AJAX 加载页面内容,然后将其注入当前 DOM 可以比加载新页面快得多。除了提高速度之外,还可以在程序员的控制下执行进一步的技巧,例如在后台加载某些部分。

pps 考虑到所有这些,“砰”或感叹号进一步暗示了 Google 的网络爬虫,可以从服务器以稍微不同的 URL 加载完全相同的页面。请参阅Ajax 爬网。另一种技术是让每个链接指向一个服务器可访问的 URL,然后使用不显眼的 Javascript 将其更改为带有锚点的 SPI。

这是关键链接:单页界面宣言

于 2010-10-16T22:30:42.497 回答
113

首先:我是 raganwald 引用的 The Single Page Interface Manifesto 的作者

正如 raganwald 所解释的那样,FaceBook 和 Twitter 中使用的单页接口 (SPI) 方法最重要的方面是#在 URL中使用哈希

添加该字符!仅用于 Google 目的,此表示法是用于抓取 AJAX 密集型网站(在极端单页界面网站中)的 Google“标准”。当 Google 的爬虫找到一个 URL 时,#!它知道存在另一个传统 URL,提供相同的页面“状态”,但在这种情况下是在加载时间。

尽管#!组合对 SEO 来说非常有趣,但仅受 Google 支持(据我所知),通过一些 JavaScript 技巧,您可以构建与任何网络爬虫(雅虎、必应......)兼容的 SPI 网站 SEO。

SPI Manifesto 和演示不使用 Google 的!in 哈希格式,可以轻松添加此表示法,并且 SPI 抓取可能更容易(更新:现在使用 ! 表示法并与其他搜索引擎保持兼容)。

看看这个教程,它是一个简单的 ItsNat SPI 站点的例子,但是你可以为其他框架挑选一些想法,这个例子对任何网络爬虫都是 SEO 兼容的。

困难的问题是生成任何(或选定的)“AJAX 页面状态”作为 SEO 的纯 HTML,在 ItsNat 中非常简单和自动,同一站点在同一时间 SPI 或基于页面的 SEO(或禁用 JavaScript 时)可访问性)。使用其他 Web 框架,您可以遵循双站点方法,一个站点基于 SPI,另一个页面基于 SEO,例如 Twitter 使用这种“双站点”技术。

于 2010-10-17T09:04:05.513 回答
90

如果你正在考虑采用这个 hashbang 约定,我会非常小心。

一旦你hashbang,你就不能回去了。这可能是最棘手的问题。Ben 的帖子指出,当 pushState 被更广泛地采用时,我们可以将 hashbang 抛在脑后,回到传统的 URL。好吧,事实是,你不能。之前我说过 URL 是永远存在的,它们会被编入索引和存档,并且通常会保留下来。除此之外,很酷的 URL 不会改变。我们不想将自己与指向我们内容的所有有价值的链接断开。如果您在任何时候都实现了 hashbang URL,那么想要在不破坏链接的情况下更改它们,唯一的方法就是在域的根文档上运行一些 JavaScript。永远。这绝不是暂时的,你被它困住了。

你真的想使用 pushState 而不是 hashbangs,因为让你的 URL 变得丑陋并且可能永远损坏 - 是 hashbangs 的一个巨大而永久的缺点。

于 2012-02-24T21:34:35.623 回答
16

为了更好地跟进这一切,Twitter——hashbang URL 和单页界面的先驱之一——承认 hashbang 系统从长远来看是缓慢的,他们实际上已经开始扭转决定并返回老派链接。

关于这个的文章在这里。

于 2012-05-31T09:51:02.960 回答
9

我总是假设!刚才指出的哈希片段对应于一个 URL,!取代了站点根目录或域。从理论上讲,它可以是任何东西,但 Google AJAX Crawling API 似乎喜欢这种方式。

当然,哈希只是表明没有发生真正的页面重新加载,所以是的,它是出于 AJAX 目的。编辑:Raganwald 做得很好,更详细地解释了这一点。

于 2010-10-16T22:31:25.640 回答