初学者指南：JavaScript重定向到新URL

用 JavaScript 灵活重定向到新网址

作为一名网站开发者，你会经常需要将用户重定向到不同的网址。无论你是想要引导用户浏览你的网站，还是将他们带到外部资源，JavaScript 都提供了多种方法来实现这一目标。在这篇文章中，我们将深入探讨三种最常见的 JavaScript 重定向方法：

使用 window.location 对象

window.location 对象是浏览器提供的内置对象，可让你操纵当前网页的地址。使用此对象重定向到新网址非常简单，只需将新网址直接分配给 window.location 属性即可。例如：

// 将用户重定向到 "https://www.example.com"
window.location = "https://www.example.com";

此方法简单易行，但它有一个缺点：它会在浏览器的历史记录中创建一个新条目。这意味着用户可以使用浏览器的后退按钮返回到之前的页面。

使用 location.replace() 方法

location.replace() 方法与 window.location 对象类似，但它有一个关键区别：它会用新网址替换当前页面，而不是在历史记录中添加新条目。这意味着用户无法使用后退按钮返回到之前的页面。

// 将用户重定向到 "https://www.example.com"，并替换当前页面
location.replace("https://www.example.com");

此方法非常适合需要防止用户返回到某个页面的情况，例如提交表单后或执行敏感操作后。

使用 location.href 属性

location.href 属性是 window.location 对象的属性，它存储当前页面的网址。使用此属性重定向到新网址与使用 window.location 对象类似，但它还有一些其他功能：

// 将用户重定向到 "https://www.example.com"，并创建一个新选项卡
location.href = "https://www.example.com";

与 location.replace() 方法类似，此方法也可以在新的选项卡或窗口中打开新网址。

选择最佳方法

这三种方法各有优缺点，选择哪种方法取决于你的具体需求：

• 如果需要在浏览器的历史记录中创建新条目，请使用 window.location 对象。
• 如果需要替换当前页面并防止用户返回，请使用 location.replace() 方法。
• 如果需要在新选项卡或窗口中打开新网址，请使用 location.href 属性。

常见问题解答

1. 如何使用 JavaScript 延时重定向？

// 2 秒后将用户重定向到 "https://www.example.com"
setTimeout(() => { window.location = "https://www.example.com"; }, 2000);

2. 如何在按钮单击时重定向？

// 在按钮单击时将用户重定向到 "https://www.example.com"
document.getElementById("myButton").addEventListener("click", () => { window.location = "https://www.example.com"; });

3. 如何防止在表单提交后重定向到新页面？

// 在表单提交时阻止默认重定向行为
document.getElementById("myForm").addEventListener("submit", (e) => { e.preventDefault(); });

4. 如何使用 JavaScript 打开新窗口并重定向到新网址？

// 打开一个新窗口并将其重定向到 "https://www.example.com"
window.open("https://www.example.com", "_blank");

5. 如何使用 JavaScript 重定向到相对路径？

// 将用户重定向到当前目录中的 "page2.html"
window.location = "page2.html";