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

Question

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

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

我只需要更改域之后的部分，所以我不违反跨域策略。

 window.location.href = "www.mysite.com/page2.php";  // 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;
    }
};

---

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

Answer 2

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

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

从这里阅读更多相关信息

Answer 3

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

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

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

Answer 4

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

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

Answer 5

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

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

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

Answer 6

parent.location.hash = "hello";

Answer 7

在现代浏览器和 HTML5中，有一个名为pushState的窗口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');

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

更改#非常简单，如下所示：

window.location.hash = "example";

你可以像这样检测它：

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

Answer 8

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

Answer 9

在 HTML5 之前我们可以使用：

parent.location.hash = "hello";

和：

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

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

Answer 10

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

例如：

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

2. 用户执行一些操作，将 URL 更改为www.site.com/#/section/page/6 /#/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 11

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

您可以在应用程序的任何位置使用这个漂亮而简单的功能来执行此操作。

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

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

Answer 13

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

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

Answer 14

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

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

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

Answer 15

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

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

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

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

Answer 16

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

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

Answer 17

您的新网址。

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

从某种意义上说，调用 pushState() 类似于设置 window.location = "#foo"，因为两者都会创建并激活与当前文档关联的另一个历史记录条目。 但是 pushState() 有几个优点：

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

您可以查看根目录： https ://developer.mozilla.org/en-US/docs/Web/API/History_API

Answer 18

你可以尝试这个

window.history.pushState("data","title","index.php?index_page");

因此，它将更改url bar数据而不加载它。

Answer 19

这段代码对我有用。 我在 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 代码加载银行列表，而无需重新加载页面。 此时，浏览器 URL 不会改变。

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 20

这就是您无需重新加载即可导航的全部内容

 // 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 21

使用：

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

您可以在博客文章中看到它， 而无需重新加载页面即可更新浏览器的URL 。

Answer 22

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

Answer 23

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

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

Answer 24

假设您不打算做恶意的事情，那么您想要对自己的URL进行的任何操作都可以被htaccess欺骗 。