什么是Facebook中的shebang / hashbang(#!)和新的Twitter网址?

我刚刚注意到,我们现在习惯的漫长而令人费解的Facebook网址现在看起来像这样:

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

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

新的Twitter网址现在还具有#! 符号。 例如,Twitter个人资料网址现在看起来像这样:

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

#!是否#! 现在在URL中扮演一些特殊的角色,比如某个Ajax框架或者其他什么东西,因为新的Facebook和Twitter界面现在已经基本上Ajax化了? 在我的URL中使用它会以任何方式使我的Web应用程序受益?


这种技术现在已被弃用。

用于告诉Google如何为网页编制索引。

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

这种技术大部分被使用与HTML5一起引入的JavaScript历史API的能力所取代。 对于像www.example.com/ajax.html#!key=value这样的网址,Google会检查网址www.example.com/ajax.html?_escaped_fragment_=key=value以获取非AJAX版本的内容。


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

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应用程序在一个“页面”上,但是有许多可收藏的部分遵守后退按钮。 应用程序必须在用户输入不同'状态'时更改锚点,并且同样,如果用户使用后退按钮或书签或链接加载包含锚点的应用程序,则应用程序必须恢复适当的状态。

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

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

pps鉴于所有这些,'bang'或惊叹号是Google的网络爬虫的进一步暗示,即可以从服务器上以略微不同的URL加载完全相同的页面。 请参阅Ajax爬行。 另一种技术是将每个链接指向服务器可访问的URL,然后使用不显眼的Javascript将其更改为带锚的SPI。

以下是关键链接:单页接口宣言


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

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

角色! 只是为了Google的目的而添加的,这个符号是用于抓取AJAX网站(在极端单页面网站中)的Google“标准”。 当Google的抓取工具发现带有#!的网址时 它知道存在提供相同页面“状态”的替代传统URL,但是在这种情况下在加载时间。

尽管#! 组合对搜索引擎优化非常有趣,只有谷歌支持(据我所知),一些JavaScript技巧,你可以建立SPI网站SEO兼容任何网络爬虫(雅虎,冰...)。

SPI宣言和演示不使用Google的格式! 在哈希中,这个记法可以很容易地添加,并且SPI抓取可能更容易(更新:现在!记号被使用并且与其他搜索引擎保持兼容)。

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

困难的问题是生成任何(或选定)的“AJAX页面状态”作为SEO的纯HTML,在ItsNat中非常容易和自动,相同的网站是在同一时间SPI或页面基于搜索引擎优化(或当JavaScript被禁用为可访问性)。 有了其他的web框架,你可以遵循双站点方法,一个站点是基于SPI的,另一个是基于SEO的页面,例如Twitter使用这种“双站点”技术。

链接地址: http://www.djcxy.com/p/64649.html

上一篇: What's the shebang/hashbang (#!) in Facebook and new Twitter URLs for?

下一篇: Wait for eglSwapBuffers posting to complete