做Twitter,Hash-Bang#等链接!网址

ixc*_*chi 26 html javascript seo hashbang

可能重复:
Facebook中的shebang/hashbang(#!)和新的Twitter URL是什么?

我想知道Twitter如何运作其链接.

如果您查看源代码,您可以使用/#!/ i/connect或/#!/ i/discover之类的链接,但它们没有附加到它们的JavaScript函数,如load('connect')或其他东西,并且它不需要重新加载页面.它只是改变了页面内容.

我看到了这个页面,但是所有这些文件都必须存在,你不能直接进入其中一个.我想在Twitter上,每个文件都不存在,而且它是用其他方法处理的.如果我错了,请纠正我.

有没有办法可以复制这种效果?如果是这样,是否有关于如何进行此操作的教程?

Bil*_*bad 119

"Hash-Bang"导航,有时被称为......

http://example.com/path/to/#!/some-ajax-state
Run Code Online (Sandbox Code Playgroud)

...是临时问题的临时解决方案,由于现代浏览器标准,该问题很快就会变成无问题.很有可能,Twitter将逐步淘汰,就像Facebook已经做的那样.

这是几个概念的结合......

在过去,链接有两个目的:它加载一个新文档和/或向下滚动到一个嵌入的锚点,如散列(#)所示.

http://example.com/script.php#fourth-paragraph
Run Code Online (Sandbox Code Playgroud)

未从服务器请求散列后URL中的任何内容,但浏览器在页面中搜索了该内容.一切都还行不错.

随着AJAX的采用,新内容可以加载到当前(已加载)页面中.通过这种动态加载,出现了几个问题:1)没有用于书签或链接到这个新内容的唯一URL,2)搜索永远不会看到它.

一些聪明的人通过将哈希用作链接和书签中包含的"状态"引用来解决第一个问题.加载文档后,浏览器读取哈希并运行AJAX请求,显示页面及其动态AJAX更改.

http://example.com/script.php#some-ajax-state
Run Code Online (Sandbox Code Playgroud)

这解决了AJAX问题,但搜索引擎问题仍然存在.搜索引擎不加载页面并像浏览器一样执行Javascript.

谷歌救援.Google提出了一个方案,其中任何带有hash-bang(#!)的URL代替哈希(#)会向搜索机器人建议有一个备用URL用于索引,其中包含一个"_escaped_fragment_"变量,以及其他的东西.在这里阅读它...

https://developers.google.com/webmasters/ajax-crawling/docs/getting-started

今天,随着大多数主流浏览器采用Javascript的pushstate,所有这些都已经过时了.使用pushstate,当动态加载或更改内容时,可以更改当前页面URL而不会导致页面加载.如果需要,这可以为书签和历史记录提供真正的工作URL.然后可以像往常一样制作链接,而不需要哈希和哈希.

截至今天,如果您在较旧的浏览器中加载Facebook,您将看到哈希爆炸,但当前的浏览器将演示使用pushstate.

  • 这不是过时的.值得注意的是,如果您有一个(文字)单页应用程序更改网址将无法正常工作.您必须设置Web服务器以将所有请求通配符到后台的单个页面. (4认同)
  • 真棒的答案!我最近1小时一直在浏览互联网,以了解整个概念,你解释得很好. (2认同)