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

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

如果可能的话，我想访问散列之前的部分

我只需要在域之后更改部分，这样就不会违反跨域策略

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

---

注意：如果你使用的是HTML5浏览器，那么你应该忽略这个答案。从其他答案中可以看出，这是可能的。

如果不重新加载页面，则无法在浏览器中修改。URL表示最后加载的页面是什么。如果您更改它（

document.location

），它将重新加载页面

---

一个明显的原因是，你在

www.mysite.com

上写了一个看起来像银行登录页面的网站。然后将浏览器URL栏更改为

www.mybank.com

。用户将完全不知道他们正在查看

www.mysite.com

位置的任何更改（无论是

window.location

还是

document.location

）都将导致对该新URL的请求，如果您不只是更改URL片段的话。如果更改URL，则更改URL

---

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

您可以添加锚定标记。我在我的网站上使用它，这样我就可以通过谷歌分析跟踪人们在页面上访问的内容

parent.location.hash = "hello";

我只需添加一个锚定标记，然后添加我要跟踪的页面部分：

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

---

现在可以在Chrome、Safari、Firefox 4+和InternetExplorer10pp4+中完成

有关更多信息，请参阅此问题的答案：

例如：

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

---

要更深入地了解如何操纵浏览器历史记录，请参阅。

HTML5介绍了和方法，它们允许您分别添加和修改历史记录条目

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

---

从

中了解更多信息如果您尝试的是允许用户为页面添加书签/共享页面，而您不需要它是正确的URL，并且您没有使用哈希锚来做任何其他事情，那么您可以分两部分来做；你使用这个位置。上面讨论的散列，然后在主页上实现检查，以查找包含散列锚点的URL，并将您重定向到后续结果

例如：

用户位于

www.site.com/section/page/4

用户执行一些操作，将URL更改为

www.site.com/#/section/page/6

（使用哈希）。假设您已将第6页的正确内容加载到页面中，因此除了散列之外，用户不会受到太大干扰

用户将此URL传递给其他人，或将其添加书签

其他人或稍后的同一用户进入

www.site.com/#/section/page/6

www.site.com/上的代码使用如下方式将用户重定向到www.site.com/section/page/6：

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');

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

如果（window.location.hash.length>0）{ window.location=window.location.hash.substring（1）； }

---

希望这有意义！在某些情况下，这是一种有用的方法。

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

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

---

这将“破坏”后退按钮的功能。在某些情况下可能需要这样做，例如图像库（您希望“后退”按钮返回到库索引页，而不是返回查看的每个图像），同时为每个图像提供其唯一的url。

如Vivart和geo1701所述，HTML5替换状态就是答案。但是，并非所有浏览器/版本都支持它。

---

包装HTML5状态功能并提供对HTML4浏览器的额外支持。

正如Thomas Stjernegaard Jeppesen所指出的，当用户浏览Ajax链接和应用程序时，您可以使用修改URL参数

这个答案已经过去了将近一年，History.js不断发展，变得更加稳定，可以跨浏览器使用。现在，它可以用于管理HTML5兼容浏览器以及许多仅HTML4浏览器中的历史状态。您可以看到它如何工作的示例（以及能够尝试其功能和限制）

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

---

最后，要全面解释使用哈希（和hashbang）的问题，请查看Benjamin Lupton的文章。

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

parent.location.hash = "hello";

以及：

此方法将重新加载页面，但HTML5引入了不应重新加载页面的

历史.pushState（页面、标题、替换url）

。

以下是我的解决方案（newUrl是您要用当前url替换的新url）：

---

使用HTML5历史API中的

history.pushState（）

---

有关更多详细信息，请参阅。

以下是在不重新加载页面的情况下更改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');

---

在现代的浏览器和HTML5中，在窗口

历史记录
上有一个名为
pushState
的方法。该方法将更改URL并将其推送到历史记录，而无需加载页面

您可以这样使用它，它需要3个参数，1）状态对象2）标题和URL）：

这将更改URL，但不会重新加载页面。此外，它不会检查页面是否存在，因此如果您执行一些对URL做出反应的JavaScript代码，您可以像这样处理它们

此外，还有
history.replaceState（）
，除了修改当前历史记录而不是创建新历史记录之外，它的作用完全相同

您还可以创建一个函数来检查
history.pushSt
window.history.pushState({page: "another"}, "another page", "example.html");

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');

window.location.hash = "example";

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

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

let newUrlIS =  window.location.origin + '/user/profile/management';

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

history.pushState({ foo: 'bar' }, '', '/bank');

function showData(){
    $.ajax({
      type: "POST",
      url: "Bank.php", 
      data: {}, 
      success: function(html){          
        $("#viewpage").html(html).show();
        $("#viewpage").css("margin-left","0px");
      }
    });
  }

history.pushState({ foo: 'bar' }, '', '/bank');

function showData(){
        $.ajax({
          type: "POST",
          url: "Bank.php", 
          data: {}, 
          success: function(html){          
            $("#viewpage").html(html).show();
            $("#viewpage").css("margin-left","0px");
            history.pushState({ foo: 'bar' }, '', '/bank');
          }
        });
      }