如何在不重新加载页面的情况下使用javascript / jQuery更新URL或查询字符串？


How do we update URL or query strings using javascript/jQuery without reloading the page?

有没有一种方法可以在不重新加载页面的情况下通过程序更新URL？

编辑：我在文章的标题中添加了一些内容。我只是想清楚我不想重新加载页面。

相关讨论

是和否。所有常见的Web浏览器都有一个安全措施来防止这种情况发生。目标是防止人们创建网站的副本，更改URL使其看起来正确，然后能够欺骗人们并获取他们的信息。

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

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

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

更多信息：

http://diveintohtml5.info/history.html

https://developer.mozilla.org/en-us/docs/web/guide/api/dom/operating_浏览器历史

相关讨论

是-document.location ="http://my.new.url.com"。

你也可以用同样的方法找回它。

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

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

1
2
3
4
5
6
7
8
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不存在，我相信什么都不会发生？(但需要在各种浏览器上确认)

伊迪丝2：要说清楚，不仅仅是在评论中：如果不更改页面，就不能用javascript更新整个URL，这是一个安全限制。否则，你可以点击一个链接到一个随机的页面，精心设计的看起来像Gmail，并立即将URL更改为www.gmail.com并窃取人们的登录信息。您可以在一些浏览器上在域后更改部分，以处理Ajax样式的事情，但这已经被Osiris链接到了。更重要的是，你可能不应该这样做，即使你可以。该URL告诉用户他/她在您的网站上的位置。如果在不更改页面内容的情况下更改它，它会变得有点混乱。

相关讨论

你可以使用：

1
window.history.pushState('obj', 'newtitle', newUrlWithQueryString)
相关讨论

使用

window.history.replaceState({}, document.title, updatedUri);

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

1
2
3
4
5
6
7
8
9
10
11
12
 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);
 }

删除查询字符串而不重新加载页

1
2
3
4
5
var url = window.location.href;
if (url.indexOf("?") > 0) {
     var updatedUri = url.substring(0, url.indexOf("?"));
     window.history.replaceState({}, document.title, updatedUri);
}
相关讨论

是的

document.location是正常的方式。

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

查看此线程，了解更多信息：

在javascript中window.location和document.location有什么区别？

在URL更改前加上哈希标记以避免重定向。

这种重定向

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

这不会重定向

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

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

1
2
3
4
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);

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

如果只想更新地址栏的内容而不重新加载页面，请参见修改URL而不重新加载页面。

相关讨论

普通javascript:document.location='http://www.google.com'；

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

相关讨论

是-用于查询的document.location.hash

相关讨论