“重定向”页面没有刷新（Facebook的照片风格）

我想要像它在Facebook上，当用户浏览这些照片做实现内容浏览。我想大家都熟悉那张照片浏览器，你可以点击“下一张”和“上一张”，然后立即获取下一张或上一张照片（也可以使用箭头键进行导航）。“重定向”页面没有刷新（Facebook的照片风格）

当您单击例如，你会注意到网页不刷新“下一步” - 唯一的内容。起初，我认为这是使用纯ajax调用完成的，它只刷新了“内容”，在这种情况下，图像，描述和评论。但后来我注意到，我的浏览器的“位置”工具栏中的URL也被更改了！我试图检查这个使用Firebug，并发现，当你点击“下一步”只下载的下一张照片，我仍然不知道从评论&图像元数据（描述，时间，标签，...）是加载。

能有人请解释这个技术是如何实现的 - 无需刷新页面页面URL变化（甚至没有网页“闪烁”，如果它从缓存刷新）。我知道如何使用Ajax来改变网页内容，但该网页的网址保持不变所有的时间。如果我点击“刷新”按钮，我会再次获得第一页。但不是在Facebook上，因为即使“window.location”每次都改变而没有实际的重定向。

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

答案是pushState的

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

你会微笑:)

来源

2010-10-29 Jeaf Gilbert

对于它的价值[（在IE8 +，其余的大多数支持） History.js]（https://github.com/balupton/History.js）提供相同的HTML5 API而正常降解不支持它的任何浏览器（包括用于数据和标题，及replaceState功能的支持）。使用这将意味着你不必为IE9的变化而改变你的代码。 – balupton 2011-02-09 15:07:20

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

在Firefox ：

页面的URL没有改变。只有散列正在改变。 This is a technique used to allow crawlers to index the content。什么情况是这样的：

用户点击“下一步”
JS加载与标签，评论，等下一个图像，并取代旧的内容与他们。
JS改变散列以对应的新的图像

网址看起来像这样： http://www.facebook.com/home.php?#!/photo.php?fbid=1550005942528966&set=a.1514725882151300.28042.100000570788121&pid=3829033&id=1000001570788121（注意散列）

至于第二个问题，这仅仅是一个以上的技术的益处。当你在Facebook上时，页面很少被刷新。只有哈希值被更改，以便您可以将链接发送给其他人，并且抓取工具可以索引内容。

在谷歌浏览器：

~~看来，铬hassome方式变更网址，而无需刷新~~的页面。它通过使用window.history.pushState来实现。阅读关于它here。

的URL看起来像这样：http://www.facebook.com/photo.php?fbid=1613802157224343&set=a.1514725288215100.28042.1000005707388121&pid=426541&id=1000001570788121（注意，不出现乱码这里，但仍与该URL图像改变一起）

在Epiphany：

顿悟不会更改URL时图像改变。

的URL看起来像这样：http://www.facebook.com/photo.php?fbid=1441817122377521&set=a.1514725882215100.28042.1000005707848121&pid=3251944&id=1000200570788121（不出现乱码，并且改变图像时网址保持不变）

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

来源

2010-10-29 07:19:42

同意。 Thx为解释，我将添加有关pushState的代码。 – 2010-10-29 08:26:20

也许你回答了这个时候，他们使用的哈希值发生变化加载新的图像，但现在当你点击下一步按钮，本身已被改变的URL，但不会刷新。即使您点击主页网址更改中的热门新闻，但页面也不会刷新。我真的很好奇它是如何工作的。 – Sridarshan 2011-07-07 06:21:26

@UberGeek AFAIK火狐（我假设你谈论它）在新版本 – 2011-07-07 07:31:14

您可能注意到了该网页的网址保持不变。但是，更改内容是页面散列（URL中的＃之后的部分）。

你需要的东西是这样的：http://code.google.com/p/reallysimplehistory/

来源

2010-10-29 07:26:46

这是不正确的'window.history.pushState'支持。图像URL出现像'HTTP：//www.facebook.com/photo.php FBID = 135122293393816＆设置= t.1575828580＆PID = 8182864＆我的镀铬地址栏的ID = 15752828580'并没有''＃中呢？。 – 2010-10-29 07:30:47

@Gabi：Chrome支持window.history.pushState，因此在Chrome中可以更改URL栏而不强制重新加载。在其他浏览器（Firefox，IE）中，URL栏只有通过该附加数据的变化（或检索它）从在URL的结尾散列标签后window.location.hash方法可变的。 – 2010-10-29 08:01:43

这里没有提到的一个技术是window.onhashchange（）方法，他们可能使用

来源

2011-11-02 22:02:11 Jordan

我相信这正是发生的事情而非其他方式。下一个和上一个链接只是改变散列，JavaScript代码反应并加载相关照片。 – Tallmaris 2012-11-07 22:16:17

“重定向”页面没有刷新（Facebook的照片风格）

回答

相关问题