JavaScript 中 window.location 对象详解与实战
引言
在 Web 开发里,window.location 是个绕不开的对象。它代表了浏览器窗口当前的 URL 信息,不仅能让我们读取地址栏里的细节,还能直接操控页面的跳转行为。无论是做单页应用的路由,还是简单的页面重定向,理解这个对象都是基本功。
对象概览
window.location 返回的是一个 Location 对象实例,包含了当前文档的完整 URL 分解信息。通过这个对象,我们可以轻松获取协议、主机名、端口、路径以及查询参数等数据。
常用属性
下面这些属性能帮你快速解析当前地址:
- href: 完整的 URL 字符串,比如
https://example.com/path?a=1。 - protocol: 协议部分,通常是
http:或https:。 - host: 主机名加端口,例如
example.com:8080。 - hostname: 纯域名,不带端口。
- port: 端口号,如果未指定则为空字符串。
- pathname: 路径部分,如
/path/to/page。 - search: 查询字符串,包含问号,如
?key=value。 - hash: 锚点部分,以
#开头,如#section1。
核心方法
除了读取,我们更常需要修改 URL 来驱动页面变化。window.location 提供了三个主要方法来控制导航:
1. assign(url) 这是最常用的跳转方式。它会加载新的文档,并在浏览历史记录中留下记录。用户点击'后退'按钮可以回到上一页。
// 跳转到新页面
window.location.assign('https://www.example.com');
2. replace(url) 如果你不希望用户在历史中保留当前页面,可以用这个方法。它替换当前文档,不会创建新的历史记录条目。常用于登录成功后跳转到首页,避免用户回退到登录页看到敏感信息。
// 替换当前页面
window.location.replace('/dashboard');
3. reload() 重新加载当前页面。默认会刷新缓存,但也可以强制从服务器获取最新资源。
// 强制刷新
window.location.reload(true);

