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

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

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

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

 window.location.href = "www.mysite.com/page2.php";  // this reloads
1892731 次浏览
小开

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

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

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

小开

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

如果您不喜欢当前使用的URL，请使用服务器端URL重写技术，例如阿帕奇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引入了#0和#1方法，允许您分别添加和修改历史条目。

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

阅读更多关于这里

小开

如果你要做的是允许用户书签/共享页面，并且你不需要它是正确的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状态替换：

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

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

小开

HTML5替换状态是答案，正如Vivart和Geo1701已经提到的那样。然而，并非所有浏览器/版本都支持它。History.js包装了HTML5状态功能，并为HTML4浏览器提供了额外的支持。

小开

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

几乎一年过去了，因为这个答案，和History.js成长，变得更加稳定和跨浏览器。现在它可以用来管理历史状态在HTML5兼容以及在许多HTML4只浏览器。

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

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

小开

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

parent.location.hash = "hello";

和：

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

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

小开

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

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

使用超文本标记语言5历史API中的history.pushState()。

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

小开

以下是无需重新加载页面即可更改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中，窗口history上有一个名为pushState的方法。这将更改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);}
小开

您可以使用这个漂亮而简单的函数在应用程序的任何地方执行此操作。

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

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

小开

这是所有你需要导航没有重新加载

// add setting without reloadlocation.hash = "setting";
// if url change with hash do somthingwindow.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();

小开

你的新网址。

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

从某种意义上说，调用pushState（）类似于设置window.location="#foo"，因为两者都将创建和激活与当前文档关联的另一个历史条目。

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

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

小开

这段代码适用于我。我在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');}});}
小开

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

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

提交答案