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

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

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

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

如果您不只是更改 URL 片段，则位置的任何更改（或 ）都将导致对该新 URL 的请求。如果更改 URL，则会更改 URL。window.locationdocument.location

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

parent.location.hash = "hello";

您可以添加锚标记。我在我的网站上使用它，以便我可以通过 Google Analytics 跟踪人们在页面上访问的内容。

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

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

现在可以在 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');

从这里阅读更多关于这方面的信息

如果您要做的是允许用户为页面添加书签/共享，并且您不需要它是完全正确的 URL，并且您没有将哈希锚用于其他任何事情，那么您可以分两部分执行此操作;您使用位置。hash，然后在主页上进行检查，以查找其中包含哈希锚的 URL，并将您重定向到后续结果。

例如：

1. 用户已开启www.site.com/section/page/4

2. 用户执行一些操作，将 URL 更改为（使用哈希）。假设您已将第 6 页的正确内容加载到页面中，因此除了哈希之外，用户不会受到太多干扰。www.site.com/#/section/page/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 replaceState：

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

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

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

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

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

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

最后，有关使用哈希（和哈希bang）可能存在的问题的全面解释，请查看本杰明·卢普顿（Benjamin Lupton）的此链接。

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

parent.location.hash = "hello";

和：

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

This method will reload your page, but HTML5 introduced the that should not reload your page.history.pushState(page, caption, replace_url)

Here is my solution (newUrl is your new URL which you want to replace with the current one):

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

Use from the HTML 5 History API.history.pushState()

Refer to the HTML5 History API for more details.

Below is the function to change the URL without reloading the page. It is only supported for 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');

In modern browsers and HTML5, there is a method called on window . That will change the URL and push it to the history without loading the page.pushStatehistory

You can use it like this, it will take 3 parameters, 1) state object 2) title and a URL):

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

This will change the URL, but not reload the page. Also, it doesn't check if the page exists, so if you do some JavaScript code that is reacting to the URL, you can work with them like this.

Also, there is which does exactly the same thing, except it will modify the current history instead of creating a new one!history.replaceState()

Also you can create a function to check if exist, then carry on with the rest like this: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');

Also, you can change the for , which won't reload the page. That's the way Angular uses to do SPA according to hashtag...#<HTML5 browsers

Changing is quite easy, doing like:#

window.location.hash = "example";

And you can detect it like this:

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

You can use this beautiful and simple function to do so anywhere on your application.

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

You can not only edit the URL but you can update the title along with it.

This is all you will need to navigate without reload

// add setting without reload 
location.hash = "setting";

// if url change with hash do somthing
window.addEventListener('hashchange', () => {
    console.log('url hash changed!');
});

// if url change do somthing (dont detect changes with hash)
//window.addEventListener('locationchange', function(){
//    console.log('url changed!');
//})


// remove #setting without reload 

history.back();

Your new url.

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

In a sense, calling pushState() is similar to setting window.location = "#foo", in that both will also create and activate another history entry associated with the current document. But pushState() has a few advantages:

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

You can check out the root: https://developer.mozilla.org/en-US/docs/Web/API/History_API

This code works for me. I used it into my application in ajax.

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

Once a page load into an ID using ajax, It does change the browser url automatically without reloading the page.

This is ajax function bellow.

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

Example: From any page or controller like "Dashboard", When I click on the bank, it loads bank list using the ajax code without reloading the page. At this time, browser URL will not be changed.

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

But when I use this code into the ajax, it change the browser url without reloading the page. This is the full ajax code here in the bellow.

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

Simply use, it will not reload the page, but just the URL :

$('#form_name').attr('action', '/shop/index.htm').submit();

These two lines are all you need.

    var new_url="Your modified URL";
    window.history.pushState(null,"",new_url);