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.hreflocation = “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 的使用！如果有具体场景，也可以告诉我，我再帮你写针对性的代码示例~