通过JavaScript更改URL（无哈希标记）

Question

我想知道Facebook在相册中切换图片时如何更改URL？没有哈希标签，只有真实的URL。

例如：当前的URL为：facebook.com/photo.php?fbid=XXXXXX1，如果我点击下一张，URL会更改为facebook.com/photo.php?fbid=XXXXXX2

有人知道如何使用JavaScript实现这个功能吗？

- daniel

Answer 1

是的。请查看https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history#Adding_and_modifying_history_entries。它会推送一个新的历史状态（HTML5中的一种方法），而不是使用哈希键。

- Matthew Brown

---

这个能跨域工作吗？如果可以，那么任何网站都可以冒充另一个网站:( 到处找找看。 - JamesM-SiteGen

@JamesM-SiteGen：不，它不能跨域工作，正如Matthew Brown提供的链接中所述：“新的URL必须与当前URL具有相同的源;” - Marco Demaio

它支持IE10及以上版本以及其他主流浏览器。 - Hannele

Answer 2

我的第一直觉是：

document.location = facebook.com/photo.php?fbid=XXXXXX2;

通过某种方式防止默认的重新加载页面操作。

- Jeremy Worboys

---

如果您更改URL（除哈希外），则无法防止重新加载。 - Matthew Flaschen

谢谢你的建议，那只是一个理论。 - Jeremy Worboys

ReferenceError: facebook未定义 :) 它不是一个字符串 :) 在这种情况下应该以"http://开头 - JamesM-SiteGen

Answer 3

总结所有答案：

我们可以说，（我不是FB编码器）Facebook使用：

• 在支持这些方法的浏览器上（我认为其中一个是Chrome），使用HTML5 window.history.pushState / replaceState / popState 方法。通过这种方式，Facebook 更改真实的URL（而不仅是#字符后面的部分）。

• 对于其他不支持这些新HTML5方法的浏览器（如IE6 / IE7和IE8），Facebook仅通过设置window.location.hash属性来更改#字符后面的URL部分。

- Marco Demaio

Answer 4

在我的测试中，它只会更改哈希标签：

例如，真实的URL是：

http://www.facebook.com/photo.php?fbid=x&set=z

点击下一步的结果是：

http://www.facebook.com/photo.php?fbid=x&set=z#!/photo.php?fbid=y&set=z&pid=pid&id=id

井号后面的部分是为Google AJAX crawl设置的。但对于浏览器来说，它只是一个哈希（片段标识符）。

- Matthew Flaschen

---

是的，我已经注意到它会更新哈希值，而哈希值非常类似于URL，所以很容易混淆。 - Amir Raminfar

@dan，你说得对，在Firefox 4上它确实做了一些不同的事情。哈希标记没有被使用，地址栏也从未改变，但是如果我保持一个shell打开，window.location会更新。 - Matthew Flaschen

pushState函数只在Firefox 4和Chrome中有效 :) 尽管在Facebook上我得到了哈希变化。 - JamesM-SiteGen