我正在尝试实现内容浏览，就像在用户浏览照片时在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]);
你会微笑：）
答案 0 :(得分：5)
我试图通过脸书图片进行更改，这就是我所看到的：
在Firefox中：
页面网址不会更改。只有哈希正在改变。 This is a technique used to allow crawlers to index the content。会发生什么：
网址看起来像这样：
http://www.facebook.com/home.php?#!/photo.php?fbid=1550005942528966&set=a.1514725882151300.28042.100000570788121&pid=3829033&id=1000001570788121（注意哈希）
至于第二个问题，这只是上述技术的一个好处。当你在Facebook上时，页面很少真正刷新。只更改了哈希，以便您可以将链接发送给其他人，并且抓取工具可以为内容编制索引。
在Google Chrome中
在没有刷新页面的情况下，似乎有点改变网址的方式。它通过使用window.history.pushState来实现。阅读它here。
网址如下所示：http://www.facebook.com/photo.php?fbid=1613802157224343&set=a.1514725288215100.28042.1000005707388121&pid=426541&id=1000001570788121（请注意，此处没有哈希值，但网址仍随图片一起变化）
Epiphany在图像更改时不会更改URL。
网址如下所示：http://www.facebook.com/photo.php?fbid=1441817122377521&set=a.1514725882215100.28042.1000005707848121&pid=3251944&id=1000200570788121（没有哈希值，更改图片时网址保持不变）
（目前没有其他浏览器可以验证）
答案 1 :(得分：2)
这里没有提到的一种技术是window.onhashchange（）方法（在ie8 +和大多数其他方面都支持），它们可能已经使用了
答案 2 :(得分：0)
您可能会注意到网页网址保持不变。然而，改变的是页面哈希（url中＃之后的部分）。