代码之家 › 专栏 › 技术社区 › Jeaf Gilbert

不刷新“重定向”页面(Facebook照片样式)

refresh redirect facebook ajax

Jeaf Gilbert · 技术社区 · 14 年前

例如,当您单击“下一步”时,您会注意到页面不刷新-仅刷新内容。起初,我认为这是使用普通的ajax调用完成的,它只刷新“内容”(在本例中是图像、描述和注释)。但后来我注意到,我的浏览器的“位置”工具栏中的URL也被更改了! 我试着用Firebug检查这个,发现当你点击“下一步”时,只有下一张照片被下载,我仍然不知道评论和图像元数据(描述、时间、标签……)是从哪里加载的。

有人能解释一下这项技术是如何完成的吗-页面URL在没有页面刷新的情况下改变(或者如果页面从缓存刷新,甚至没有页面“闪烁”)。我知道如何使用ajax更改页面内容,但该页面的URL始终保持不变。如果我点击“刷新”按钮,我会再次看到第一页。但Facebook上没有,因为即使是“window.location”每次都会更改,而没有实际的重定向。

我注意到的另一件事是底部的工具栏(应用程序,聊天,…)总是“在顶部”。即使您更改了页面,此工具栏也不会刷新,并且始终保持在最上面—它甚至不会像其他刷新的页面(从Web服务器或本地缓存)那样“闪烁”。我想这和上面的技术是一样的-某种“假”重定向还是什么?

答案是pushState

if (window.history.pushState)
    window.history.pushState([object or string], [title], [new link]);

你会微笑:)

3 回复 | 直到 14 年前

Gabi Purcaru BornCoder 14 年前

我试着通过facebook的图片来改变,这就是我所看到的:

在Firefox中:

页面URL未更改。只有散列在变化。 This is a technique used to allow crawlers to index the content . 发生了什么事:

用户点击“下一步”
JS用标记、注释等加载下一个图像,并用它们替换旧内容。
JS更改散列以对应新图像

URL如下所示: http://www.facebook.com/home.php?#!/photo.php?fbid=1550005942528966&set=a.1514725882151300.28042.100000570788121&pid=3829033&id=1000001570788121 (注意散列)

至于第二个问题,这只是上述技术的一个好处。当你在facebook上时,页面很少真正更新。只有哈希值被更改,以便您可以向其他人发送链接,而爬网程序可以对内容进行索引。

~~看起来chrome在不刷新页面的情况下更改url是个麻烦的方法~~ . 它通过使用 window.history.pushState . 读一下吧 here .

http://www.facebook.com/photo.php?fbid=1613802157224343&set=a.1514725288215100.28042.1000005707388121&pid=426541&id=1000001570788121 (注意,这里没有散列,但是url仍然随着图像而改变)

在 Epiphany :

URL如下所示: http://www.facebook.com/photo.php?fbid=1441817122377521&set=a.1514725882215100.28042.1000005707848121&pid=3251944&id=1000200570788121 (没有散列,更改图像时URL保持不变)

(现在没有其他浏览器可供验证)

Jordan 13 年前

这里没有提到的一种技术是window.onhashchange()方法(在ie8+和大多数其他方法中都支持),他们可能已经使用了该方法

IonuÈ Staicu 14 年前

您可能会注意到页面url保持不变。然而,改变的是页面哈希(url中#后面的部分)。

http://code.google.com/p/reallysimplehistory/