如何更改当前的URL？

Question

我有以下的代码可以在 JavaScript 中更改页面：

var newUrl = [some code to build up URL string];
window.location.replace(newUrl);

但它并不改变顶部的URL，所以当有人点击后退按钮时，它不会返回到上一页。

我该如何让JavaScript同时改变顶部的URL，这样浏览器的后退按钮才能正常使用呢？

- leora

Answer 1

document.location.href = newUrl;

https://developer.mozilla.org/en-US/docs/Web/API/document.location

- glebm

Answer 2

可以简单地将值分配给 window.location 或 window.location.href：

window.location = newUrl;

然而，你的新URL将会让浏览器加载新页面，但看起来你想修改URL而不离开当前页面。你有两个选项：

1. 使用URL哈希（hash）。例如，你可以从 example.com 跳转到 example.com#foo 而不用加载新页面。你只需要简单地设置 window.location.hash 即可。然后，你应该监听 HTML5 的 hashchange 事件，在用户按下“后退”按钮时会触发该事件。老版本的 IE 不支持，但是可以查看 jQuery BBQ 模块，它能在所有浏览器中正常运行。
2. 你可以使用HTML5历史记录（History）对象来修改路径而不重新加载页面。这将允许您从 example.com/foo 切换到 example.com/bar。使用它很容易：

   window.history.pushState("example.com/foo");

   当用户按下“后退”按钮时，你可以轻松监听窗口的 popstate 事件（jQuery）：

   $(window).bind("popstate", function(e) { alert("location changed"); });

   不幸的是，这只在非常现代的浏览器中支持，比如Chrome、Safari和Firefox 4 beta。

- bcherry

---

字符串上的.replace方法不会改变它被应用到的字符串，而是会生成一个新的字符串。window.location.replace()方法与String.prototype.replace()方法不同，因为window.location不是一个字符串（它是一个对象）。window.location.replace()将当前URL替换为一个新的URL，并覆盖旧URL在历史记录中的条目。 - Andy E

感谢您的纠正，我会相应地更新我的答案。 - bcherry

回顾过去，这绝对是最好的答案。document.location.href不及pushState。 - buley

Answer 3

如果您只希望更新相对路径，也可以执行以下操作： window.location.pathname = '/new-relative-link' "http://domain.com" -> "http://domain.com/new-relative-link"

- Artokun

Answer 4

嗯，我会使用

window.location = 'http://localhost/index.html#?options=go_here';

我不太确定你的意思是否是这样。

- Blender

Answer 5

这将完成它：

window.history.pushState(null,null,'https://www.google.com');

- Chris Smith

Answer 6

<script> 
    var url= "http://www.google.com"; 
    window.location = url; 
</script> 

- user3230794

Answer 7

将用户重定向到另一个URL的最佳方法是使用window.location.assign（请参见https://developer.mozilla.org/en-US/docs/Web/API/Location/assign）。

然而，如果您想要更改页面的URL而不重定向用户，则可以使用window.history.replaceState函数（请参见https://developer.mozilla.org/en-US/docs/Web/API/History/replaceState）。现在单页应用程序（SPA）使用这个函数的组合和window.history.pushState来跟踪用户在应用程序中的导航，以便后退按钮按预期工作。

您可以查看我提供的文档链接中的示例，以了解如何使用这些函数。

- Miguel Sánchez Villafán