如何使用JavaScript让浏览器导航到URL

Question

如何使用JavaScript以最佳（正确，现代，跨浏览器，安全）方式让Web浏览器导航到您选择的URL？

- jjujuma

---

不是重复。另一个问题涉及重定向。 - ftvs

不是重复的问题，但与此有关。另一个问题没有这样简明扼要的答案来澄清我的问题的解决方案。 - Jesse

确保您使用“http://”或“https://”前缀。 - Jason

Answer 1

这在所有浏览器中都有效：

window.location.href = '...';

如果你想要在不影响浏览器后退历史记录的情况下更改页面，你可以这样做：

window.location.replace('...');

- Paolo Bergantino

---

使用 window.location = '...' 等同于 window.location.href = '...' - 来源于 Window.location API。 - Oliver

如果你想避免重新加载整个页面（虽然从技术上讲这不被认为是导航），请了解一下history.pushState和history.replaceState。 - masterxilo

如果您想模拟单击链接，使用 location.href。如果您想模拟HTTP重定向，请使用 location.replace。请注意，location.replace 不会在会话历史记录中保留原始页面。 - Agnel Vishal

你还应该提到 window.location.assign('...')，它的功能与 window.location.href = '...' 相同。 - Ben Wheeler

有没有办法在window.location.href中使用target="_blank"？如果我还想使用rel="noopener noreferrer"，该怎么办？（我不能使用<a>标签。） - undefined

Answer 2

尝试以下方法：

1. window.location.href = 'http://www.google.com';
2. window.location.assign("http://www.w3schools.com");
3. window.location = 'http://www.google.com';

想了解更多，请参考此链接：使用JavaScript重新加载页面的其他方法

- tilak

---

如果解释一下这三者之间的区别会更有帮助。此外，请参考'http://stackoverflow.com/help/how-to-answer'中的'为链接提供上下文'，因为该链接没有提供更多信息。 - Michael Scheper

如果您正在使用Node.js与TestCafe，则还可以执行以下操作：await t.navigateTo('http://www.google.com'); - Seth Eden

location.assign 在我的情况下起作用了，谢谢 :) - vintprox

有没有一种方法可以在任何这些或类似调用之后等待页面完全加载？例如，如果我在Chrome控制台中运行此代码，则只有最后一个页面（Google）会真正加载。 window.location.href = 'http://www.google.com'; window.location.assign("http://www.w3schools.com"); window.location = 'http://www.google.com'; - Joe

可以使用document.location = "...";、document.location.href ="..." ;、document.location.assign("...");和document.location.replace("....");来实现。 - Javad-M

Answer 3

看起来这是正确的方式 window.location.assign("http://www.mozilla.org");

• https://developer.mozilla.org/zh-CN/docs/Web/API/Window/location
• https://www.w3schools.com/js/js_window_location.asp
• https://web.archive.org/web/20150307183711/https://jstricks.com/javascript-redirect-page-redirection/

- Bogdan

---

文档写得很好，但其中提到“assign”函数不会将当前地址保存在历史记录中，这是需要考虑的。并没有正确或错误的方法，这取决于程序员的需求。 - Or Betzalel

@OrBetzalel，我相信assign函数确实会在浏览器历史记录中保存当前地址（当然这可能因浏览器而异）。请参考https://developer.mozilla.org/en-US/docs/Web/API/Location上的讨论，其中解释了`window.location.replace()`不会将当前地址保存在历史记录中，但未提到`window.location.assign()`。在我自己使用Chrome（截至2019年10月的当前Mac版本）进行测试时，window.location.assign()确实会将当前地址保存在浏览器的历史记录中。 - Ben Wheeler

在我自己使用 Chrome 进行测试（截至 2023 年 4 月的当前 Mac 版本），window.location.assign() 不会将当前地址保存在浏览器历史记录中。 - ahuigo