Question

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

我正在寻找一种方法，使用我当前的javascript动画使我的内部链接功能正常，而不会在您点击它们时重新加载页面 - 但我希望在浏览器中更新URL

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

如何在没有重新加载页面的情况下获取更新的URL？

更多详情：

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

javascript看起来像：

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

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

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

感谢。

Answer 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
   );
}

Answer 2

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

我没有深入研究它，但这就是我的样子。

更改浏览器地址栏中的URL而不重新加载现有页面

2 个答案: