77

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

编辑：我在帖子的标题中添加了一些内容。我只是想明确表示我不想重新加载页面

4

10 回答 10

93

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

然而，一些 HTML5 兼容的网络浏览器已经实现了一个历史 API，可以用于类似你想要的东西：

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

于 2013-10-09T17:56:18.673 回答
39

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

您也可以以相同的方式检索它，例如。

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

位置对象也有许多有用的属性：

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 告诉用户他/她在您的网站上的位置。如果您在不更改页面内容的情况下更改它，它会变得有点混乱。

于 2012-09-20T07:53:31.923 回答
7

您可以使用 ：

window.history.pushState('obj', 'newtitle', newUrlWithQueryString)
于 2015-12-26T19:17:13.447 回答
5

利用

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);
}
于 2018-03-26T13:48:53.860 回答
4

定义一个新的 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);
于 2018-04-04T00:22:31.543 回答
3

是的

document.location 是正常的方式。

然而 document.location 实际上与 window.location 相同，除了 window.location 在较旧的浏览器中得到更多支持，因此可能是更受欢迎的选择。

在 SO 上查看此线程以获取更多信息：

JavaScript 中的 window.location 和 document.location 有什么区别？

于 2012-09-20T07:58:17.153 回答
1

使用主题标签为 URL 更改添加前缀以避免重定向。

这重定向

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

这不会重定向

location.href += '#&test='true';
于 2016-09-27T16:41:19.610 回答
0

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

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

于 2012-09-20T07:59:04.167 回答
0

纯 javascript: document.location = 'http://www.google.com';

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

于 2012-09-20T07:56:35.983 回答
-3

是 -document.location.hash用于查询

于 2012-09-20T07:55:00.610 回答