深入理解 JavaScript window.location 对象与页面跳转控制

JavaScript Window Location

引言

在 Web 开发中，window.location 对象是浏览器窗口里的核心属性之一，它充当了当前 URL 的接口。无论是做简单的页面跳转，还是复杂的单页应用路由，理解并正确使用这个对象都是基本功。本文将结合实战场景，梳理它的常用属性和方法。

window.location 对象概述

window.location 本质上是一个 URLLocation 对象，包含了浏览器当前加载页面的完整 URL 信息。通过它，我们不仅能读取地址栏的内容，还能直接修改 URL 触发导航行为。

常用属性

这些属性对应 URL 的不同组成部分，读取它们通常不需要额外配置：

• href: 返回完整的 URL 字符串，例如 https://example.com:8080/path?query=1#hash
• protocol: 协议部分，如 http: 或 https:
• host: 域名加端口号，例如 example.com:8080
• hostname: 仅域名，不含端口
• port: 端口号，若未指定则返回空字符串
• pathname: 路径部分，不包含查询参数和哈希
• search: 查询字符串，包含问号 ? 及之后的内容
• hash: 片段标识符，包含井号 # 及之后的内容

核心方法

除了读取，location 对象还提供了几个关键方法来改变当前页面状态：

• assign(url) 加载给定 URL 的新文档。这会在浏览历史记录中添加一个新条目，用户点击后退按钮可以回到原页面。

  // 跳转到新页面
  location.assign('https://www.example.com');
  

• replace(url) 用新文档替换当前文档。与 assign 不同，它不会在历史记录中留下痕迹，用户无法通过后退按钮返回。

  // 替换当前页面，无历史记录
  location.replace('/login');
  

• reload() 重新加载当前页面。默认参数为 false（普通刷新），设为 true 则强制从服务器重新获取资源。

  // 强制刷新
  location.reload(true);