当您单击“下一步”,例如您注意到该页面不会刷新 – 只有内容.起初我以为是使用纯粹的ajax调用来完成,在这种情况下只刷新“内容”的图像,描述和注释.但是后来我注意到浏览器的“位置”工具栏中的URL也改变了！
我试图使用Firebug检查这个,发现当你点击“下一个”只有下一张照片被下载,我仍然不知道从哪里的评论和图像元数据(描述,时间,标签,…)被加载.
有人可以解释这种技术如何完成 – 页面URL更改,无需页面刷新(甚至没有页面“闪烁”,如果从缓存刷新).
我知道如何使用ajax更改页面内容,但该网页的URL始终保持不变.如果我点击“刷新”按钮,我再次获得第一页.但是没有在Facebook上,因为即使“window.location”也是每次都改变没有实际的重定向.
我注意到的另一件事是底部的工具栏(应用程序,聊天,…)是“总是在顶部”.即使您更改页面,此工具栏也不会刷新,并始终保持在顶部 – 它甚至不会像其他刷新的页面(从Web服务器或本地缓存)都“闪烁”.我想这是和上面一样的技巧 – 某种“假”重定向或什么东西？
答案是pushState
if (window.history.pushState)
window.history.pushState([object or string],[title],[new link]);
你会笑:)
在Firefox中：
网页网址没有更改.只有哈希正在改变.这是什么呢？
>用户点击“下一步”
> JS使用标签,注释等加载下一个图像,并用它们替换旧的内容.
> JS更改哈希值以对应新的图像
网址看起来像这样：
http://www.facebook.com/home.PHP?#!/photo.PHP?fbid=1550005942528966\u0026amp;set=a.1514725882151300.28042.100000570788121\u0026amp;pid=3829033\u0026amp;id=1000001570788121(注意哈希)
至于第二个问题,这只是上述技术的好处.当您在Facebook上时,页面很少被实际刷新.只有哈希已更改,以便您可以发送链接到其他人,并且抓取工具可以索引内容.
在Google Chrome中：
似乎chrome hassome的方式来更改网址而不刷新页面.它通过使用window.history.pushState来实现.阅读here.
网址看起来像这样：http://www.facebook.com/photo.PHP?fbid=1613802157224343\u0026amp;set=a.1514725288215100.28042.1000005707388121\u0026amp;pid=426541\u0026amp;id=1000001570788121(注意,这里没有哈希,但仍然网址随图像一起变化)
Epiphany：
当图像更改时,主显节不会更改URL.
网址看起来像这样：http://www.facebook.com/photo.PHP?fbid=1441817122377521\u0026amp;set=a.1514725882215100.28042.1000005707848121\u0026amp;pid=3251944\u0026amp;id=1000200570788121(没有哈希,URL保持不变当更改图像时)
(现在没有其他浏览器要验证)