如何使用javascript/jQuery更新URL或查询字符串而不重新加载页面？

有没有一种方法可以在不重新加载页面的情况下以编程方式更新URL

---

编辑：我在帖子的标题中添加了一些内容。我只是想说明我不想重新加载页面http://my.new.url.com“

你也可以用同样的方法检索它

var myURL = document.location;
document.location = myURL + "?a=parameter";

location对象也有许多有用的属性：

hash            Returns the anchor portion of a URL
host            Returns the hostname and port of a URL
hostname        Returns the hostname of a URL
href            Returns the entire URL
pathname        Returns the path name of a URL
port            Returns the port number the server uses for a URL
protocol        Returns the protocol of a URL
search          Returns the query portion of a URL

编辑： 设置document.location的哈希值不应重新加载页面，只需更改页面上焦点的位置即可。因此，更新到

#myId

将滚动到带有

id=“myId”

的元素。如果

id

不存在，我相信什么都不会发生？（但需要在各种浏览器上确认）

EDIT2:为了清楚起见，不仅仅是在评论中：

---

在不更改页面的情况下，无法使用javascript更新整个URL，这是一个安全限制。否则，你可以点击一个随机页面的链接，该页面看起来像gmail，然后立即将URL更改为www.gmail.com并窃取用户的登录详细信息。

---

您可以在某些浏览器上更改域后的部分，以处理AJAX风格的事情，但Osiris已经链接到了这一点。更重要的是，你可能不应该这样做，即使你可以。URL告诉用户他/她在您的站点上的位置。如果您在不更改页面内容的情况下更改它，则会变得有点混乱。

是-

document.location.hash

用于查询http://www.google.com';

这将导致浏览器刷新。如果需要更新URL以实现某种浏览历史而不重新加载页面，请考虑使用散列。如果是这种情况，您可能需要查看jQuery.hashchange。

是

文档位置是正常的方式

但是document.location实际上与window.location相同，只是window.location在较旧的浏览器中更受支持，因此可能是首选

查看SO上的此线程以了解更多信息：

---

你需要更具体一些。“更新URL”是什么意思？这可能意味着自动导航到不同的页面，这当然是可能的

---

如果只想在不重新加载页面的情况下更新地址栏的内容，请参见“是”和“否”。所有常见的web浏览器都有一个安全措施来防止出现这种情况。目标是防止人们创建网站副本，更改URL使其看起来正确，然后能够欺骗人们并获取他们的信息

但是，一些与HTML5兼容的web浏览器已经实现了一个历史API，可以用于类似于您想要的内容：

if (history.pushState) {
    var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?myNewUrlQuery=1';
    window.history.pushState({path:newurl},'',newurl);
}

我做了测试，效果很好。它不会重新加载页面，但只允许您更改URL查询。您将无法更改协议或主机值

有关更多信息：

您可以使用：

window.history.pushState('obj', 'newtitle', newUrlWithQueryString)

---

使用哈希标记更改URL前缀，以避免重定向

这会改变方向

location.href += '&test='true';

这不会重定向

location.href += '#&test='true';

使用

window.history.replaceState（{}，document.title，updatedUri）

在不重新加载页面的情况下更新Url

 var url = window.location.href;
 var urlParts = url.split('?');
 if (urlParts.length > 0) {
     var baseUrl = urlParts[0];
     var queryString = urlParts[1];

     //update queryString in here...I have added a new string at the end in this example
     var updatedQueryString = queryString + 'this_is_the_new_url' 

     var updatedUri = baseUrl + '?' + updatedQueryString;
     window.history.replaceState({}, document.title, updatedUri);
 }

var url = window.location.href;
if (url.indexOf("?") > 0) {
     var updatedUri = url.substring(0, url.indexOf("?"));
     window.history.replaceState({}, document.title, updatedUri);
}

在不重新加载页面的情况下删除查询字符串

 var url = window.location.href;
 var urlParts = url.split('?');
 if (urlParts.length > 0) {
     var baseUrl = urlParts[0];
     var queryString = urlParts[1];

     //update queryString in here...I have added a new string at the end in this example
     var updatedQueryString = queryString + 'this_is_the_new_url' 

     var updatedUri = baseUrl + '?' + updatedQueryString;
     window.history.replaceState({}, document.title, updatedUri);
 }

var url = window.location.href;
if (url.indexOf("?") > 0) {
     var updatedUri = url.substring(0, url.indexOf("?"));
     window.history.replaceState({}, document.title, updatedUri);
}

---

定义一个新的URL对象，为其分配当前URL，将参数附加到该URL对象，最后将其推送到浏览器状态

var url = new URL(window.location.href);
//var url = new URL(window.location.origin + window.location.pathname) <- flush existing parameters
url.searchParams.append("order", orderId);
window.history.pushState(null, null, url);

var url=新url（window.location.href）；
//var url=new url（window.location.origin+window.location.pathname）给出一个您试图实现的示例。是否要更改DOM中的可见url（在地址栏中）或文档url字符串？@Maurice我只想更改可见url使用window.history.replaceState（），因为我正在更新所有url，不仅仅是hash你不能在不改变页面的情况下用javascript更新整个URL，这是一个安全限制。否则，你可以点击一个指向随机页面的链接，并立即让URL显示www.gmail.com，窃取用户登录。设置
document.location
重新加载页面。感谢@AlainTiemblo-如果你阅读了整个答案，你会看到我承认这一点，并且我已经说明了一些注意事项。很好的深入解释。它重新加载页面。我正在寻找一种不会删除页面的解决方案。是的，当然，它会重新加载页面。为了获得新页面并插入其内容，您需要将其与ajax结合起来。提出问题的人不想重新加载页面。是的，这会导致浏览器刷新。正在寻找不重新加载的内容。应该可以不进行页面刷新，但据我所知，它仅在较新的浏览器中受支持。你应该改为更改散列url。谢谢你的链接！我正在查看答案单击“后退”将删除更改，但我喜欢这种想法。这种方法在某些浏览器中不起作用，因为
window.location.pathname
包含一条斜线
//code>，结果值可以是
http://my.domain.com/?myNewUrlQuery=1
而不是
http://my.domain.com?myNewUrlQuery=1
。我只是在查看
窗口.历史记录.替换状态（）
我不确定这三个参数的作用，你能解释一下吗？第二个，特别是
document.title
似乎没有任何作用。
replaceState（）
的操作与
pushState（）
的操作完全相同，因此请检查文档的描述
title
参数暂时被忽略，但如果您不想在历史记录中保存url更改，他们可能会在将来使用它。或者window.history.replaceState（'obj'，'newtitle'，newUrlWithQueryString）。