在不刷新现有页面的情况下更改浏览器地址栏中的URL

Question

可能是重复问题:
修改URL而不重新加载页面

我想找一种方法，使用当前的JavaScript动画使我的内部链接具有功能性，点击它们时不会导致页面重新加载 - 但我希望在浏览器中更新URL。

许多网站都这样做，这是一个很好的例子：http://grooveshark.com/#!/search?q=adf

他们是如何在不重新加载页面的情况下更新URL的呢？

---

更多细节：

目前，我的页面上的链接看起来像<a href="#aboutus">关于我们</a>，这将通过JavaScript将您带到<div id="aboutus"></div>。

JavaScript大致如下：

$("#navigation a").click(function(e){
  animate(..scroll to section..);
  e.preventDefault(); // <==========
});

我相信 "e.preventDefault()" 是导致 URL 没有更新的原因，但是当 URL 改变时，如何防止浏览器重新加载页面？

其他网站是如何做到的呢？这种方法叫什么名字（以便我进一步研究）？

谢谢。

- Radley Sustaire

---

您可能会发现这个链接有帮助：https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history - Maziar Aboualizadehbehbahani

Answer 1

这里有一个类似的问题。

以下是一个示例：

function processAjaxData(response, urlPath){
    document.getElementById("content").innerHTML = response.html;
    document.title = response.pageTitle;
    window.history.pushState(
        {
            "html":response.html,
            "pageTitle":response.pageTitle
        },
        "",
        urlPath
   );
}

- Maziar Aboualizadehbehbahani

---

啊，没错，pushstate 似乎是这个难题中缺失的一块。非常感谢你。 - Radley Sustaire

Answer 2

在我看来，整个过程都是通过AJAX完成的。URL中的#!导致浏览器将URL的其余部分解释为锚点--锚点不会引起页面重新加载（事实上，服务器在正常的HTTP请求过程中永远不会看到浏览器所在的锚点）。当URL改变时，Javascript接管了，检查查询字符串，并使用Web服务从服务器加载适当的内容。

我没有深入研究它，但这就是我看到的。

- Katie Kilian