在浏览器地址栏中更改 URL 而无需重新加载现有页面 [重复]答案

【问题标题】：Change URL in browser address bar without reload existing page [duplicate]在浏览器地址栏中更改 URL 而无需重新加载现有页面 [重复]
【发布时间】：2012-06-12 19:19:07
【问题描述】：

可能重复：
Modify the URL without reloading the page

我正在寻找一种方法来使用我当前的 javascript 动画使我的内部链接正常工作，而不会在您单击它们时导致页面重新加载 - 但我希望在浏览器中更新 URL强>.

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

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

更多细节：

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

javascript 看起来像这样：

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

我认为“e.preventDefault()”是导致 URL 不更新的原因，但是如何防止浏览器在 URL 更改时重新加载页面？

其他网站是如何做到的？这个方法叫什么（所以我可以进一步研究）？

谢谢。

【问题讨论】：

也可能会觉得这很有帮助：developer.mozilla.org/en/DOM/Manipulating_the_browser_history

标签： javascript html url

【解决方案1】：

Here is a similar question.

这是一个例子：

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

【讨论】：

啊，是的，pushstate 似乎是拼图中缺失的部分。非常感谢

【解决方案2】：

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

我没有深入研究过它，但在我看来就是这样。

【讨论】：