如何在不重新加载页面的情况下修改URL？

现在可以在Chrome、Safari、Firefox 4+和Internet Explorer 10pp4+中进行!

更多信息请看此问题'的回答。 https://stackoverflow.com/questions/3338642/updating-address-bar-with-new-url-without-hash-or-reloading-the-page

例：{{{5692695}}。

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

然后你可以使用window.onpopstate来检测后退/前进按钮的导航。

window.onpopstate = function(e){
    if(e.state){
        document.getElementById("content").innerHTML = e.state.html;
        document.title = e.state.pageTitle;
    }
};

更深入地了解如何操作浏览器历史记录，请参阅这篇MDN文章。

HTML5引入了[history.pushState()](https://developer.mozilla.org/en-US/docs/Web/API/History_API#The_pushState()_method)和[`history.replaceState()`](https://developer.mozilla.org/en-US/docs/Web/API/History_API#The_replaceState()_method)方法，分别允许您添加和修改历史条目。

window.history.pushState('page2', 'Title', '/page2.php');

从[这里][1]阅读更多相关内容。

[1]: https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history

如果您想更改url，但又不想将该条目添加到浏览器历史记录中，您也可以使用HTML5 replaceState。

if (window.history.replaceState) {
   //prevents browser from storing history with each change:
   window.history.replaceState(statedata, title, url);
}

这将'打破&39。 的后退按钮功能。 这在某些情况下可能是必需的，比如一个图片库（你想让后退按钮返回到图片库索引页，而不是返回到你浏览的每一张图片），同时给每张图片一个独特的网址。

**注意：如果你使用的是HTML5浏览器，那么你应该忽略这个答案。从其他答案中可以看出，现在可以做到这一点了。

没有办法在不重新加载页面的情况下修改浏览器中的URL。URL代表最后加载的页面。如果你改变它（document.location），那么它将重新加载页面。

一个明显的原因是，你在www.mysite.com上写了一个网站，看起来像一个银行登录页面。然后你把浏览器的URL栏改为www.mybank.com。用户将完全不知道他们真正看到的是www.mysite.com。

下面是我的解决方案（newUrl是你要用当前的URL替换的新URL）。

history.pushState({}, null, newUrl);

正如 Vivart 和 geo1701 所述，HTML5 replaceState 就是答案。 然而它并不是所有浏览器/版本都支持。 History.js][1]封装了HTML5状态功能，并为HTML4浏览器提供了额外的支持。

[1]: https://github.com/balupton/history.js

在现代浏览器和HTML5中，窗口 "history "上有一个叫做 "pushState "的方法。 它将改变URL并将其推送到历史记录中，而无需加载页面。

你可以像这样使用它，它需要3个参数，1)状态对象 2)标题和一个URL)。

window.history.pushState({page: "another"}, "another page", "example.html");

这将改变URL，但不重新加载页面。 另外，它不会检查页面是否存在，所以如果你做了一些对URL有反应的JavaScript代码，你可以像这样使用它们。

还有history.replaceState()，它做的事情是完全一样的，只是它将修改当前的历史记录，而不是创建一个新的历史记录。

你也可以创建一个函数来检查history.pushState是否存在，然后像这样继续工作。

function goTo(page, title, url) {
  if ("undefined" !== typeof history.pushState) {
    history.pushState({page: page}, title, url);
  } else {
    window.location.assign(url);
  }
}

goTo("another page", "example", 'example.html');

也可以把 "#"改成"<HTML5浏览器"，这样就不会重载页面了。 这就是Angular根据hashtag做[SPA][1]的方法......

改变#很简单，像这样做。

window.location.hash = "example";

而你可以这样检测。

window.onhashchange = function () {
  console.log("#changed", window.location.hash);
}

[1]: https://en.wikipedia.org/wiki/Single-page_application

在HTML5之前，我们可以使用。

parent.location.hash = "hello";

和。

window.location.replace("http:www.example.com");

这个方法会重载你的页面，但是HTML5引入了history.pushState(page, caption, replace_url)，应该不会重载你的页面。

如果你想做的是允许用户收藏/分享页面，而且你不需要它是完全正确的URL，而且你也不使用哈希锚来做其他事情，那么你可以分两部分来做。 你使用上面讨论的location.hash，然后在主页上实现一个检查，寻找一个带有hash锚的URL，并将你重定向到随后的结果。

举个例子

1）用户在www.site.com/section/page/4上。

2）用户做了一些操作，将URL改为www.site.com/#/section/page/6（带哈希值）。 假设你'已经把第6页的正确内容加载到了页面中，所以除了哈希值之外，用户不会受到太大的干扰。

3. 用户将这个URL传给别人，或者将其作为书签。

4）别人或同一用户在以后的日子里，到www.site.com/#/section/page/6。

5. www.site.com/上的代码将用户重定向到www.site.com/section/page/6，使用类似这样的代码。

if (window.location.hash.length > 0){ 
   window.location = window.location.hash.substring(1);
}

希望这有意义! 对于某些情况来说，这是一个有用的方法。

下面是无需重新加载页面就可以更改URL的功能。 它只支持HTML5。

  function ChangeUrl(page, url) {
        if (typeof (history.pushState) != "undefined") {
            var obj = {Page: page, Url: url};
            history.pushState(obj, obj.Page, obj.Url);
        } else {
            window.location.href = "homePage";
            // alert("Browser does not support HTML5.");
        }
    }

  ChangeUrl('Page1', 'homePage');

如果你不只是改变URL片段，任何对LOECTION（无论是window.location还是document.location）的改变都会引起对新URL的请求。如果你改变了URL，你就改变了URL。

如果你不喜欢你目前使用的URL，请使用服务器端的URL重写技术，如Apache的mod_rewrite。

你可以添加锚标签。 我在我的网站http://www.piano-chords.net/ 上使用了这个功能，这样我就可以用 Google Analytics 跟踪人们在页面上访问的内容。

我只需添加一个锚标签，然后添加我想跟踪的页面部分。

var trackCode = "/#" + urlencode($("myDiv").text());
window.location.href = "http://www.piano-chords.net" + trackCode;
pageTracker._trackPageview(trackCode);

正如Thomas Stjernegaard Jeppesen所指出的，你可以使用History.js在用户浏览你的Ajax链接和应用程序时修改URL参数。

从那个答案到现在已经过去了将近一年，History.js也在不断成长，变得更加稳定和跨浏览器。 现在，它可以用于管理HTML5兼容的历史状态，也可以用于许多只支持HTML4的浏览器。 在这个演示中]2你可以看到它如何工作的一个例子（以及能够尝试它的功能和限制。

如果你需要任何帮助来使用和实现这个库，我建议你看看演示页面的源代码。 你会看到它非常容易做到。

最后，关于使用哈希(和hashbangs)可能存在的问题的全面解释，请查看Benjamin Lupton的[本链接][3]。

[3]：https://github.com/browserstate/history.js/wiki/Intelligent-State-Handling

使用HTML 5 History API中的history.pushState()。

更多细节请参考[HTML5 History API][1]。

[1]: http://diveintohtml5.info/history.html

使用。

    let stateObject = { foo: "bar" };
    history.pushState(stateObject, "page 2", "newpage.html");

你可以在博文中看到更新浏览器的URL，不重载页面。

1:

使用window.history.pushState("object or string", "Title", "/new-url")，但它仍然会向服务器发送一个新的URL请求。

假设你不是想做一些恶意的事情，你想对自己的URL做的任何事情都可以用htaccess的方式来实现。