window.location.href 是 JavaScript 中最常用的属性之一，用于获取或设置当前页面的完整 URL。1. 基本介绍
- 所属对象：window.location（location 是 window 的属性）
- 类型：字符串（string）
- 作用：
- 读取：获取当前页面的完整 URL（包括协议、域名、路径、查询参数、锚点等）
- 写入：将新 URL 赋值给它 → 浏览器立即跳转到该 URL（相当于页面重定向）
MDN 官方文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Location/href2. 常见用法
| 用法 | 说明 | 示例代码 |
|---|---|---|
| 获取当前 URL | 返回完整 URL 字符串 | console.log(window.location.href); |
| 跳转到新页面（当前窗口） | 直接赋值即可跳转 | window.location.href = “https://www.example.com”; |
| 跳转到相对路径 | 相对于当前页面 | window.location.href = “/about”; |
| 跳转到当前页面（刷新） | 常用于强制刷新 | window.location.href = window.location.href; |
| 省略 window 前缀 | JavaScript 允许 | location.href = “https://baidu.com”; |
| 直接赋值给 location（等效） | 浏览器会自动解析为 location.href | location = “https://google.com”; |
3. 实际代码示例
javascript
// 1. 获取当前完整 URL
console.log(location.href);
// 输出示例: https://example.com/path?name=张三#section1
// 2. 页面跳转（最常用）
function gotoPage() {
location.href = "https://www.baidu.com"; // 跳转到百度
}
// 3. 带参数跳转
location.href = "/search?keyword=" + encodeURIComponent("JavaScript location");
// 4. 跳转后无法返回（不推荐日常使用）
location.replace("https://www.example.com"); // 替换历史记录，用户无法“后退”
// 5. 安全跳转（推荐现代写法）
location.assign("https://www.example.com"); // 等价于 location.href，但更可读且易测试
4. 与其他跳转方式的对比（面试常考）
| 方法/属性 | 是否加入历史记录 | 是否可后退 | 推荐场景 |
|---|---|---|---|
| location.href = url | 是 | 可以 | 普通页面跳转（最常用） |
| location.assign(url) | 是 | 可以 | 现代推荐写法，易于单元测试 |
| location.replace(url) | 否 | 不可 | 登录成功后跳转、404 重定向 |
| location.reload() | — | — | 刷新当前页面 |
| window.open(url) | 新窗口/标签 | — | 打开新标签页 |
5. 常见注意点
- 跨域限制：直接操作 location.href 只在同源页面有效（同协议+域名+端口）。
- 相对路径：location.href = “page.html” 相对于当前路径跳转。
- 锚点（hash）：location.href = “#top” 不会触发页面刷新，但会滚动到锚点。
- 刷新页面：location.href = location.href 或 location.reload()。
- iframe / frameset：可能需要 parent.location.href 或 top.location.href 来控制父/顶层窗口。
6. 最佳实践
javascript
// 推荐写法：清晰且易测试
function redirectToHome() {
window.location.assign("/"); // 或 location.assign("/")
}
// 替代写法（传统且更常见）
function redirectToHome() {
location.href = "/";
}
希望这篇总结能帮你快速掌握 window.location.href 的使用！如果有具体场景，也可以告诉我，我再帮你写针对性的代码示例~