window.location.href 属性用于获取或设置当前页面的完整 URL。它包含了协议（如 http:// 或 https://）、主机名、端口号（如果指定）、路径、查询字符串和哈希部分。

基本语法：

  • 获取当前 URL：let currentUrl = window.location.href;
  • 设置新 URL：window.location.href = "https://www.example.com";

返回值：

  • 字符串：返回当前页面的完整 URL，包括协议、主机名、路径、查询字符串和哈希部分。

示例：

假设当前页面的 URL 是：

https://www.example.com:8080/path?name=JohnDoe#section1

console.log(window.location.href);
// 输出: "https://www.example.com:8080/path?name=JohnDoe#section1"

如果页面的 URL 是：

https://www.example.com/path

console.log(window.location.href);
// 输出: "https://www.example.com/path"

设置 URL：

通过直接修改 window.location.href，可以实现页面重定向。浏览器会加载新的 URL，并且会将当前页面加入浏览器历史记录中。

// 跳转到新的页面
window.location.href = "https://www.example.com";

// 跳转到相对路径
window.location.href = "/newpage.html";

特点：

  • 页面跳转：通过设置 window.location.href，浏览器会加载新的页面并将其添加到浏览器的历史记录中。
  • 浏览器历史记录：当通过 href 跳转页面时，浏览器会保存跳转前的页面，以便用户可以通过“后退”按钮返回。
  • 页面重载：如果将 window.location.href 设置为当前页面的 URL，页面会重新加载。

示例：页面重定向

// 让页面跳转到 Google
window.location.href = "https://www.google.com";

使用场景：

  1. 页面重定向：你可以在某些事件发生后，跳转到新的页面。
  2. 处理页面导航：在单页面应用（SPA）中，可能需要使用 href 进行完整的页面重载。
  3. 动态链接构建：根据当前页面信息动态构建并跳转到新的 URL。

与其他 window.location 属性的对比：

  • window.location.assign(url)：与 window.location.href 类似，但 assign() 方法是专门用于加载新的 URL，具有相同的行为。
  • window.location.replace(url)：与 assign() 和 href 相似，但 replace() 会替换当前页面在历史记录中的位置，不允许通过“后退”按钮返回到当前页面。
  • window.location.pathname：仅返回 URL 的路径部分，不包括协议、主机名和查询字符串。

示例：构建动态跳转 URL

// 根据用户的输入构建一个 URL 并跳转
let query = "javascript";
window.location.href = `https://www.google.com/search?q=${query}`;

总结：

  • window.location.href 获取当前页面的完整 URL。
  • 通过设置 window.location.href，你可以实现页面跳转，并将跳转记录到浏览器历史记录中。
  • 如果你需要完整控制 URL 的导航或跳转，href 是最常用的方法。

如果你有具体的需求，或者想了解如何在项目中应用该属性，随时告诉我！