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

问题描述

可能存在重复：

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

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

他们如何获得URL更新页面重新加载？

---

更多详情：

我的网页上的链接看起来像< a href =＃aboutus>关于我们< / a> ，这会将您带到< div id =aboutus>< / div> 通过javascript 。

javascript看起来像这样：
$ b $

  $（＃导航a）。click（function（e）{
 animate（.. scroll to section ..）; 
 e.preventDefault（）; //< ========== 
}）; 
  

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

其他网站如何做？这是什么方法调用（所以我可以进一步研究它）？

谢谢。

解决方案

这里是

以下是一个例子： c> function processAjaxData（response，urlPath）{
document.getElementById（content）。innerHTML = response.html;
document.title = response.pageTitle;
window.history.pushState（
{
html：response.html，
pageTitle：response.pageTitle
}，
，
urlPath
）;
}

Possible Duplicate:
Modify the URL without reloading the page

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.

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

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

---

More details:

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

The javascript looks something like:

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

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)?

thanks.

解决方案

Here is a similar question.

Here is an example:

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

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