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、跳转到新页面或重新加载页面，是网页编程中常用的一个功能。
发表回复