Question

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

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

我只需要更改域之后的部分，因此我不会违反跨域政策。

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

Answer 1

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

有关详细信息，请参阅此问题的答案： Updating address bar with new URL without hash or reloading the page

示例：

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

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

Answer 2

HTML5引入了history.pushState()和history.replaceState()方法，分别允许您添加和修改历史记录条目。

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

从here

了解详情

Answer 3

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

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

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

Answer 4

注意：如果您使用的是HTML5浏览器，则应忽略此答案。现在可以在其他答案中看到这一点。

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

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

Answer 5

parent.location.hash = "hello";

Answer 6

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

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

Answer 7

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

Answer 8

在HTML5之前我们可以使用：

parent.location.hash = "hello";

和

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

此方法会重新加载您的网页，但HTML5会引入不应重新加载您网页的history.pushState(page, caption, replace_url)。

Answer 9

如果你要做的是允许用户书签/共享页面，并且你不需要它是完全正确的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);
}

希望有道理！对于某些情况，这是一种有用的方法。

Answer 10

在现代浏览器和HTML5 中，窗口pushState上有一个名为history的方法。这将更改URL并将其推送到历史记录而不加载页面。

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

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

这将更改网址，但不会重新加载网页。此外，它不会检查页面是否存在，因此如果您执行一些对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');

此外，您可以更改#的{{1}}，但不会重新加载该页面。这是Angular根据hashtag ... {/ p>用来做SPA的方式

更改<HTML5 browsers非常简单，例如：

你可以这样检测出来：

window.location.hash = "example";

Answer 11

如果您不只是更改网址片段，那么对该位置的任何更改（window.location或document.location）都会对该新网址产生请求。如果您更改了网址，则会更改网址。

如果您不喜欢当前使用的网址，请使用Apache’s mod_rewrite等服务器端网址重写技术。

Answer 12

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

Answer 13

您可以添加锚标记。我在我的网站http://www.piano-chords.net/上使用此功能，以便我可以使用Google Analytics跟踪用户在网页上访问的内容。

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

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

Answer 14

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

自那个答案以来差不多有一年了，History.js变得更加稳定和跨浏览器。现在，它可以用于管理HTML5兼容的历史状态以及许多HTML4浏览器中的历史状态。 In this demo您可以看到它的工作原理示例（以及能够尝试其功能和限制。

如果您需要有关如何使用和实现此库的任何帮助，我建议您查看演示页面的源代码：您将看到它非常容易。

最后，要全面解释使用哈希（和hashbangs）的问题，请查看Benjamin Lupton撰写的this link。

Answer 15

您的新网址。

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

从某种意义上讲，调用pushState（）与设置window.location =“ #foo”类似，因为两者都将创建并激活与当前文档关联的另一个历史记录条目。但是pushState（）有一些优点：

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

Answer 16

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

有关详细信息，请参阅HTML5 History API。

Answer 17

此代码对我有用。我在我的 ajax 应用程序中使用了它。

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

一旦使用ajax将页面加载到ID中，它会自动更改浏览器url而无需重新加载页面。

这是下面的ajax函数。

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

示例：从任何页面或控制器（如“仪表板”），当我单击银行时，它会使用 ajax 代码加载银行列表，而无需重新加载页面。此时浏览器网址不会改变。

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

但是当我将此代码用于 ajax 时，它会更改浏览器 url，而无需重新加载页面。这是下面的完整 ajax 代码。

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

Answer 18

您可以使用此精美而简单的功能来在应用程序中的任何位置使用

。

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

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

对每个人都有帮助。

Answer 19

这是您无需重新加载即可进行导航的所有操作

// 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();

Answer 20

简单使用，它不会重新加载页面，而只会重新加载 URL :

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

Answer 21

使用：

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

您可以在博客文章 Update URL of browser without page reload 中看到它。

Answer 22

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

Answer 23

假设您没有尝试做恶意的事情，那么您希望对自己的网址做的任何事情都会被htaccess标记为。

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

23 个答案: