JavaScript 中 location 与 location.href 详解：获取和设置当前页面 URL

JavaScript 中 location 与 location.href

简介

location 和 location.href 是 JavaScript 中两个与窗口当前 URL 相关的属性。两者都可以用来设置或获取当前页面的 URL，但它们有一些关键的区别。

location

location 是一个对象，它包含有关当前窗口 URL 的各种信息，包括：

• 协议（protocol）
• 主机（hostname）
• 端口（port）
• 路径（pathname）
• 哈希（hash）
• 搜索参数（search）

你可以使用 location 对象的属性来获取或设置这些值。例如，以下代码获取当前窗口的协议：

const protocol = location.protocol;

location.href

location.href 是 location 对象的一个属性，它表示当前窗口的完整 URL。你可以使用 location.href 来设置或获取整个 URL。例如，以下代码设置当前窗口的 URL：

location.href = "https://www.example.com";

异同

设置 URL

location 和 location.href 都可以用来设置当前窗口的 URL。但是，location.href 更简单，因为它只需要一个字符串作为参数。

获取 URL

location.href 也可以用来获取当前窗口的 URL。但是，如果你需要获取有关当前 URL 的更详细信息（例如协议或主机），则需要使用 location 对象。

相对 URL

location.href 可以用于相对 URL，而 location 对象不能。相对 URL 不包含协议、主机或端口，只包含路径和哈希。

最佳实践

在大多数情况下，使用 location.href 来设置或获取当前 URL 是更简单的选择。它易于使用，并且可以用于相对 URL。

但是，如果你需要获取有关当前 URL 的其他信息（例如协议或主机），则需要使用 location 对象。

常见问题解答

1. 什么是绝对 URL 和相对 URL？

• 绝对 URL 包含协议、主机、端口、路径和哈希。例如：https://www.example.com/path/to/page
• 相对 URL 不包含协议、主机或端口。例如：/path/to/page

2. 如何使用 location 对象获取当前页面的协议？

const protocol = location.protocol;

3. 如何使用 location.href 设置当前页面的 URL？

location.href = "https://www.example.com";

4. 如何使用 location 对象获取当前页面的搜索参数？

const searchParams = new URLSearchParams(location.search);

5. location 和 window.location 有什么区别？

location 和 window.location 是同一个对象。你可以使用这两个属性来访问和修改当前窗口的 URL。