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

有没有办法可以在不重新加载页面的情况下修改当前页面的URL？

如果可能，我想访问＃哈希之前的部分。

我只需要更改域后的部分，所以就好像我没有违反跨域策略一样。

 window.location.href = "www.mysite.com/page2.php";  // Sadly this reloads

现在，可以在Chrome，Safari，Firefox 4+和Internet Explorer 10pp4 +中完成此操作！

有关更多信息，请参见此问题的答案： 使用新URL更新地址栏，而不散列或重新加载页面

例：

 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()和history.replaceState()方法，分别允许您添加和修改历史记录条目。

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

从这里了解更多

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

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

这将“破坏”后退按钮的功能。在某些情况下可能需要这样做，例如图片库（您希望后退按钮返回到图片库索引页面，而不是在浏览的每个图像中都回退），同时为每个图像提供自己的唯一网址。

这是我的解决方案（newUrl是您要用当前URL替换的新URL）：

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

注意：如果使用的是HTML5浏览器，则应忽略此答案。如其他答案所示，现在这是可能的。

无法修改 如果不重新加载页面，在浏览器中 URL。该URL代表上一次加载的页面。如果您更改它（document.location），它将重新加载页面。

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

parent.location.hash = "hello";

在现代浏览器和HTML5中，有一种称为pushStatewindow 的方法history。这将更改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');

您也可以更改#for <HTML5 browsers，不会重新加载页面。这就是Angular用来做SPA的方式根据标签 ...

更改#非常容易，例如：

window.location.hash = "example";

您可以像这样检测到它：

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

如Vivart和geo1701所述，HTML5 replaceState是答案。但是，并非所有浏览器/版本都支持该功能。 History.js包装了HTML5状态功能，并为HTML4浏览器提供了额外的支持。

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

parent.location.hash = "hello";

和：

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

此方法将重新加载页面，但是HTML5引入了history.pushState(page, caption, replace_url)不应重新加载页面的方法。

如果您要尝试的是允许用户添加书签/共享页面，而又不需要它是完全正确的URL，并且您没有在其他任何地方使用哈希锚，则可以将其分为两部分部分; 您可以使用上面讨论的location.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片段，则对位置的任何更改（window.location或document.location）都将导致对该新URL的请求。如果更改URL，则更改URL。

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

您可以添加锚标记。我在网站上使用它，以便可以通过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的浏览器中的历史记录状态。在此演示中，您可以看到一个示例其工作方式（以及可以尝试其功​​能和限制的示例）。

如果您在如何使用和实现该库方面需要任何帮助，我建议您看一下演示页面的源代码：您会发现它很容易做到。

最后，要全面了解使用散列（和哈希爆炸）可能存在的问题，请查看Benjamin Lupton的此链接。

使用history.pushState()从HTML 5 API的历史。

有关更多详细信息，请参考HTML5历史记录API。

您可以使用此漂亮而简单的功能在应用程序中的任何地方使用。

function changeurl(url, title) {
    var new_url = '/' + url;
    window.history.pushState('data', 'Title', new_url);
    document.title = title;
}

您不仅可以编辑URL，还可以同时更新标题。

对每个人都非常有帮助。