无需重新加载现有页面即可更改浏览器地址栏中的 URL [英] Change URL in browser address bar without reload existing page

问题描述

可能的重复:
修改网址而不重新加载页面

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

I'm looking for a way to make my internal links functional using my current javascript animations, without causing the page to reload when you click on them - but I would like the URL to update in the browser.

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

Many websites do this, here is a good example: http://grooveshark.com/#!/search?q=adf

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

How do they get the URL to update without the page reloading?

更多详情:

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

Currently a link on my page looks like <a href="#aboutus">About Us</a>, this takes you to <div id="aboutus"></div> via javascript.

javascript 看起来像:

The javascript looks something like:

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

我相信e.preventDefault()"是导致 URL 未更新的原因，但是如何在 URL 更改时阻止浏览器重新加载页面?

I believe the "e.preventDefault()" is what is causing the URL to not be updated, but how do I prevent the browser from reloading the page when the URL is changed?

其他网站是怎么做的?这个方法叫什么(所以我可以进一步研究)?

How do other websites do it? What is this method called (so I can further research it)?

谢谢.

推荐答案

这是一个类似的问题.

这是一个例子:

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

这篇关于无需重新加载现有页面即可更改浏览器地址栏中的 URL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！