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

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

我刚刚注意到,我们过去使用的长而复杂的Facebook网址现在看起来像这样:

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

据我回忆,今年早些时候,它只是一个普通的URL片段,比如字符串(从#开始),没有感叹号。但现在它是shebang或hashbang(#!),我以前只在shell脚本和perl脚本中看到过。

新的twitter网址现在也采用了#!符号。例如,Twitter配置文件的URL现在如下所示:

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

#!现在是否在URL中扮演了一些特殊的角色,比如对于某个Ajax框架,或者由于新的Facebook和Twitter界面现在基本上是半封闭的?在我的URL中使用这个会对我的Web应用程序有任何好处吗?


此技术现在已被弃用。

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

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

这种技术主要被使用HTML5旁边引入的JavaScriptHistoryAPI的能力所取代。对于像www.example.com/ajax.html#!key=value这样的URL,Google将检查该URL www.example.com/ajax.html?_escaped_fragment_=key=value以获取内容的非Ajax版本。


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

https://en.wikipedia.org/wiki/Alan_Turing早期计算机和图灵测试

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控制台中,键入:

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

您将看到从服务器刷新页面。现在类型:

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

啊哈!没有页面刷新!Type:

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

仍然没有刷新。使用后退按钮查看这些URL是否在浏览器历史记录中。浏览器注意到我们在同一个页面上,但只是更改了锚,所以它不会重新加载。由于这种行为,我们可以有一个单独的javascript应用程序,它在浏览器中显示在一个"页面"上,但是有许多可书签的部分都与后退按钮相关。当用户进入不同的"状态"时,应用程序必须更改锚定,同样,如果用户使用后退按钮、书签或链接加载包含锚定的应用程序,应用程序必须还原适当的状态。

这样就有了:锚为JavaScript程序员提供了一种机制,使书签、可索引和后退按钮友好的应用程序。这种技术有一个名字:它是一个单页接口。

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

P.P.S.鉴于所有这些,"bang"或感叹号进一步暗示了谷歌的网络爬虫可以从服务器以稍微不同的URL加载完全相同的页面。请参见Ajax爬行。另一种技术是使每个链接指向一个服务器可访问的URL,然后使用不引人注目的javascript将其更改为带有锚的SPI。

这里又是一个关键链接:单页界面声明


首先:我是Raganwald引用的单页界面宣言的作者

正如Raganwald所解释的,Facebook和Twitter中使用的单页面界面(SPI)方法最重要的方面是在URL中使用hash-#

添加字符!只是为了谷歌的目的,这个符号是谷歌的"标准",用于对Ajax(在极端的单页界面网站)上密集的网站进行爬行。当google的爬虫程序找到一个带有#!的URL时,它知道存在一个提供相同页面"状态"的替代传统URL,但在这种情况下是加载时间。

尽管#!的组合对seo非常有意思,但它只有google支持(据我所知),通过一些javascript技巧,你可以建立与任何网络爬虫(yahoo,bing…)兼容的spi网站seo。

SPI宣言和演示没有使用Google的!格式的散列,这个符号可以很容易地添加,SPI爬行更容易(更新:现在!符号被使用,并与其他搜索引擎保持兼容)。

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

困难的问题是生成任何(或选定的)"Ajax页面状态"作为SEO的纯HTML,在它的nat中非常容易和自动,同一站点同时是SPI或基于SEO的页面(或当为可访问性禁用javascript时)。对于其他Web框架,您可以使用双站点方法,一个站点基于SPI,另一个基于SEO的页面,例如,Twitter使用这种"双站点"技术。


如果您考虑采用这个hashbang约定,我会非常小心的。

Once you hashbang, you can’t go back. This is probably the stickiest issue. Ben’s post put forward the point that when pushState is more widely adopted then we can leave hashbangs behind and return to traditional URLs. Well, fact is, you can’t. Earlier I stated that URLs are forever, they get indexed and archived and generally kept around. To add to that, cool URLs don’t change. We don’t want to disconnect ourselves from all the valuable links to our content. If you’ve implemented hashbang URLs at any point then want to change them without breaking links the only way you can do it is by running some JavaScript on the root document of your domain. Forever. It’s in no way temporary, you are stuck with it.

您真的想使用pushstate而不是hashbang,因为让您的URL变得丑陋,并且可能永远被破坏,这是hashbang的一个巨大且永久的缺点。


为了更好地跟进这一切,Twitter——hashbang url和单页面界面的先驱之一——承认hashbang系统长期以来运行缓慢,事实上他们已经开始改变决定并返回旧的学校链接。

有关这方面的文章在这里。


我一直假设!只是表示后面的哈希片段对应于一个URL,!取代了站点根或域。理论上,它可以是任何东西,但看起来GoogleAjax爬行API喜欢这样。

当然,散列只是表示没有进行真正的页面重新加载,所以是的,它是用于Ajax的。编辑:拉甘瓦尔德做了一个可爱的工作,更详细地解释这一点。


上面的答案很好地描述了为什么以及如何在Twitter和Facebook上使用它,我错过的是解释默认情况下#所做的……

在"普通"(不是单页应用程序)上,可以通过将元素ID放在URL中hash #之后,将hash锚定到具有ID的任何元素。

例子:

(在chrome上)单击f12rigt mouseInspect element

enter image description here

然后取id="answer-10831233"并添加到url,如下所示

https://stackoverflow.com/questions/3009380/whats-the-shebang-hashbang-in-facebook-and-new-twitter-urls-for#answer-10831233

你会得到一个跳转到页面上那个元素的链接

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

通过以上述答案中描述的方式使用#,您将引入冲突行为…尽管我不会因为它而放松睡眠…从角度上看,它变得有点像一个标准……