window.location.href的介绍及使用

lichongyang

2 周前

`window.location.href` 的介绍与使用

window.location.href 是 JavaScript 中 window.location 对象的一个属性，用于获取或设置当前网页的完整 URL（统一资源定位符）。它允许开发者获取当前页面的地址，并且也可以用来跳转到其他网页。

1. `window.location` 对象

window.location 是一个包含当前文档 URL 相关信息的对象。它提供了许多属性和方法，用于获取和操作浏览器的地址栏 URL。

window.location 对象的常用属性：

href: 返回当前文档的完整 URL，可以通过该属性进行页面跳转。
protocol: 返回当前 URL 的协议部分（例如，http: 或 https:）。
host: 返回当前 URL 的主机名（包括端口号，若有）。
hostname: 返回当前 URL 的主机名（不包括端口号）。
pathname: 返回当前 URL 中的路径部分。
search: 返回当前 URL 中查询字符串部分（例如，?id=123）。
hash: 返回当前 URL 中的锚点部分（例如，#section1）。

2. `window.location.href`

window.location.href 是 window.location 对象的一个字符串属性，表示当前网页的完整 URL。

读取 href：返回当前页面的完整 URL（包括协议、域名、路径、查询字符串等）。
修改 href：设置一个新的 URL，可以用来跳转到其他网页或重新加载当前页面。

3. `window.location.href` 的使用

3.1 获取当前页面的 URL

通过访问 window.location.href，你可以获取当前页面的完整 URL。例如：

// 获取当前页面的完整 URL
let currentUrl = window.location.href;
console.log(currentUrl); // 输出当前页面的 URL

3.2 跳转到另一个 URL

你可以通过设置 window.location.href 为新的 URL 来实现页面跳转。当你设置 href 属性时，浏览器会加载新的页面。例如：

// 跳转到另一个页面
window.location.href = "https://www.example.com";

这将使浏览器跳转到 https://www.example.com。

3.3 重新加载当前页面

通过将 window.location.href 设置为当前 URL，你可以实现页面的重新加载：

// 重新加载当前页面
window.location.href = window.location.href;

或者更常见的做法是使用 window.location.reload() 方法：

// 重新加载当前页面
window.location.reload();

3.4 通过查询字符串进行跳转

你也可以动态构造 URL，并跳转到包含查询参数的页面。例如，如果你需要根据某个条件跳转到带有查询字符串的 URL，可以这样做：

// 构造一个带查询字符串的 URL
let baseUrl = "https://www.example.com/search";
let queryParams = "?query=JavaScript";
let newUrl = baseUrl + queryParams;

// 跳转到带查询字符串的 URL
window.location.href = newUrl;

这将使浏览器跳转到 https://www.example.com/search?query=JavaScript。

4. `window.location.href` 跳转与 `window.location.replace()`

window.location.href 会将当前页面推入浏览器的历史记录栈，因此用户可以点击浏览器的“返回”按钮返回到前一个页面。
window.location.replace() 则替代当前页面，而不会将当前页面添加到浏览器的历史记录中，因此用户不能使用“返回”按钮返回到当前页面。

示例：

// 跳转到新页面，允许返回
window.location.href = "https://www.example.com";

// 替代当前页面，不能返回
window.location.replace("https://www.example.com");

5. `window.location.href` 和 SPA（单页面应用）

在单页面应用（SPA）中，window.location.href 通常用于页面之间的跳转。单页面应用程序通常使用客户端路由（如 React Router、Vue Router 等）来处理 URL 和视图的变化，而不是传统的浏览器页面刷新。因此，通常会结合使用 window.location.href 或 window.location.assign() 来实现页面的完全跳转，或者使用客户端路由来避免页面刷新。

6. 总结

获取当前 URL：
- let currentUrl = window.location.href;
跳转到新页面：
- window.location.href = "https://www.example.com";
重新加载当前页面：
- window.location.href = window.location.href; 或 window.location.reload();
替代当前页面（不添加到历史记录中）：
- window.location.replace("https://www.example.com");

通过 window.location.href，你可以轻松地在浏览器中获取当前 URL、跳转到新页面或重新加载页面，是网页编程中常用的一个功能。

window.location.href 的介绍与使用

1. window.location 对象

2. window.location.href

3. window.location.href 的使用