ajax – “重定向”页面不刷新(Facebook照片风格)

发布时间：2020-12-16 03:06:03 所属栏目：百科来源：网络整理

导读：我正在尝试实现内容浏览,就像在Facebook上浏览照片一样.我猜每个人都熟悉那个照片浏览,你可以点击“下一个”和“上一个”,并立即获取下一张或上一张照片(您也可以使用箭头键导航). 当您单击“下一步”,例如您注意到该页面不会刷新 – 只有内容.起初我以为是

我正在尝试实现内容浏览,就像在Facebook上浏览照片一样.我猜每个人都熟悉那个照片浏览,你可以点击“下一个”和“上一个”,并立即获取下一张或上一张照片(您也可以使用箭头键导航).

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

有人可以解释这种技术如何完成 – 页面URL更改,无需页面刷新(甚至没有页面“闪烁”,如果从缓存刷新).
我知道如何使用ajax更改页面内容,但该网页的URL始终保持不变.如果我点击“刷新”按钮,我再次获得第一页.但是没有在Facebook上,因为即使“window.location”也是每次都改变没有实际的重定向.

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

答案是pushState

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

你会笑:)

我试图通过Facebook图片来改变,这就是我所看到的：

在Firefox中：

网页网址没有更改.只有哈希正在改变.这是什么呢？

>用户点击“下一步”
> JS使用标签,注释等加载下一个图像,并用它们替换旧的内容.
> JS更改哈希值以对应新的图像

网址看起来像这样：
http://www.facebook.com/home.php?#!/photo.php?fbid=1550005942528966u0026amp;set=a.1514725882151300.28042.100000570788121u0026amp;pid=3829033u0026amp;id=1000001570788121(注意哈希)

至于第二个问题,这只是上述技术的好处.当您在Facebook上时,页面很少被实际刷新.只有哈希已更改,以便您可以发送链接到其他人,并且抓取工具可以索引内容.

在Google Chrome中：

似乎chrome hassome的方式来更改网址而不刷新页面.它通过使用window.history.pushState来实现.阅读here.

网址看起来像这样：http://www.facebook.com/photo.php?fbid=1613802157224343u0026amp;set=a.1514725288215100.28042.1000005707388121u0026amp;pid=426541u0026amp;id=1000001570788121(注意,这里没有哈希,但仍然网址随图像一起变化)

Epiphany：

当图像更改时,主显节不会更改URL.

网址看起来像这样：http://www.facebook.com/photo.php?fbid=1441817122377521u0026amp;set=a.1514725882215100.28042.1000005707848121u0026amp;pid=3251944u0026amp;id=1000200570788121(没有哈希,URL保持不变当更改图像时)

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!