我想实现内容浏览就像是做在Facebook上时，用户浏览照片。我想大家都很熟悉的照片浏览，您可以点击下一步和previous并立即寻求下一个或previous照片（你还可以导航使用箭头键）。

I am trying to implement content browsing like it is done on Facebook when user is browsing the photos. I guess everyone is familiar with that photo browsing where you can click "next" and "previous" and immediately get the next or previous photo (you can also navigate using arrow keys).

当你点击下一步比如你注意到网页不刷新 - 只有内容。起初我以为它正在使用哪个刷新此情况下，只有量的形象，描述和评论纯AJAX调用来完成。但后来我注意到，也是在我的浏览器的位置工具栏上的网址被改变！ 我试图检查这种使用萤火虫，并发现，当你点击下一步只有一张照片被下载，我还是不知道从那里的意见和放大器;图像元数据（描述，时间，标签，...）被加载。

When you click "next" for example you notice that the page does not refresh - only the content. At first I thought it is done using plain ajax calls which refresh only the "content" in this case the image, description and comments. But then I noticed that also URL in the "Location" toolbar of my browser is changed! I tried to inspect this using Firebug and discovered that when you click "next" only the next photo is downloaded and I still don't know from where the comments & image meta data (description, time, tags,...) are loaded.

有人可以解释这个技术做 - 无需刷新页面网页网址的变化（或甚至不网页闪烁，如果它从缓存中刷新）。 我知道如何使用AJAX来改变网页内容，但该网页的网址保持不变所有的时间。如果我点击刷新按钮，我再次得到了第一页。但不是在Facebook，因为连window.location的每次都没有改变实际的重定向。

Can someone please explain how this technique is done - page URL changes without page refresh (or even without page "blinking" if it refreshes from cache). I know how to change page content using ajax but URL of that page stays the same all the time. If I click on "refresh" button I get the first page again. But not on Facebook since even the "window.location" is changed every time without actual redirect.

其他的事情，我注意到的是，底部的工具栏（应用程序，聊天，...）是总在最前面。即使更改了页面，​​此工具栏不刷新，始终走在最前面 - 它甚至不眨眼一样，刷新（无论是从网络服务器或从本地缓存）其他网页。我想这是与上述相同的技术 - 某种形式的假重定向或什么

The other thing I noticed is that the bottom toolbar (applications, chat, ...) is "always on top". Even if you change the page, this toolbar is not refreshed and always stays on top - it doesn't even "blink" like other pages that are refreshed (either from webserver or from local cache). I guess this is the same technique as above - some kind of "fake" redirects or something?

答案是pushState

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

您会微笑：）

推荐答案

我试图通过Facebook的图像发生变化，这是我所看到的：

I've tried to change through facebook images, and this is what I saw:

在Firefox中：

页面的URL没有改变。仅散列正在改变。 这是用于允许抓取工具来索引内容。什么情况是这样的：

The page URL is not changing. Only the hash is changing. This is a technique used to allow crawlers to index the content. What happens is this:

网址如下：    http://www.facebook.com/home.php?#!/photo.php?fbid=1550005942528966&set=a.1514725882151300.28042.100000570788121&pid=3829033&id=1000001570788121 （注意哈希）

urls look like this: http://www.facebook.com/home.php?#!/photo.php?fbid=1550005942528966&set=a.1514725882151300.28042.100000570788121&pid=3829033&id=1000001570788121 (notice the hash)

至于第二个问题，这是上述技术只是一个好处。当你在Facebook上的页面很少得到实际刷新。只有哈希改变，这样就可以将链接发送给其他人，并抓取工具可以索引的内容。

As for the second question, this is just a benefit of the technique above. When you are on facebook, the page rarely gets actually refreshed. Only the hash is changed so that you can send links to other people and crawlers can index the content.

在谷歌浏览器：

看来，镀铬hassome的方式来改变网址而无需刷新页面。它是通过使用 window.history.pushState 。阅读关于它这里。

It seems that chrome hassome way to change urls without refreshing the page. It does that by using window.history.pushState. Read about it here.

网址如下： http://www.facebook.com/photo.php?fbid=1613802157224343&set=a.1514725288215100.28042.1000005707388121&pid=426541&id=1000001570788121 （注意，不出现乱码在这里，但仍与该URL的图像变化着）

urls look like this: http://www.facebook.com/photo.php?fbid=1613802157224343&set=a.1514725288215100.28042.1000005707388121&pid=426541&id=1000001570788121 (notice that there is no hash here, but still the url is changing along with images)

在顿悟：

In Epiphany:

主显不改变URL时的图像的变化。

Epiphany doesn't change the URL when the image changes.

网址如下： http://www.facebook.com/photo.php?fbid=1441817122377521&set=a.1514725882215100.28042.1000005707848121&pid=3251944&id=1000200570788121 （不存在散列和URL的改变图像时保持不变）

urls look like this: http://www.facebook.com/photo.php?fbid=1441817122377521&set=a.1514725882215100.28042.1000005707848121&pid=3251944&id=1000200570788121 (there is no hash, and the URL stays the same when changing the image)

（没有其他的浏览器来验证现在）

(don't have other browsers to verify right now)