📍 什么是Window Location？

在JavaScript中，window.location 是一个非常重要的对象，它包含了当前浏览器窗口所显示页面的URL信息。你可以把它想象成浏览器地址栏的”编程接口”。

这个对象非常实用，因为它允许我们：

• 获取当前页面的URL信息
• 解析URL的各个组成部分
• 通过JavaScript实现页面跳转
• 获取URL中的查询参数
• 刷新当前页面

🔍 Location 对象的属性

location 对象提供了许多有用的属性，可以让你访问URL的各个部分：

属性	说明	示例
href	完整的URL地址	https://example.com/products?id=123#details
protocol	使用的协议（http: 或 https:）	https:
host	主机名和端口号	example.com:8080
hostname	主机名（域名）	example.com
port	端口号	8080
pathname	URL的路径部分	/products
search	查询字符串（?后面的部分）	?id=123&category=books
hash	URL的锚点部分（#后面的部分）	#details
origin	URL的协议、主机名和端口号	https://example.com:8080

⚙️ Location 对象的方法

除了读取URL信息，location 对象还提供了一些方法来操作浏览器地址：

1. location.assign()

加载一个新的文档（页面跳转）

// 跳转到新的页面 - 会添加到浏览历史记录中
location.assign('https://example.com/new-page');

大白话解释： 告诉浏览器”请带我去这个新页面”，浏览器会记录这次访问，点击后退按钮可以回到之前的页面。

2. location.replace()

用新文档替换当前文档（页面跳转但不记录历史）

// 替换当前页面 - 不会添加到浏览历史记录
location.replace('https://example.com/another-page');

大白话解释： 告诉浏览器”请用这个新页面替换当前页面”，浏览器不会记录这次访问，点击后退按钮会回到替换前的上一个页面。

3. location.reload()

重新加载当前页面

// 重新加载当前页面（可能从缓存加载）
location.reload();

// 强制重新加载（不使用缓存）
location.reload(true);

大白话解释： 相当于点击浏览器的刷新按钮。true 参数表示”强制刷新”，忽略浏览器缓存。

4. location.toString()

返回完整的URL字符串，与 location.href 效果相同

// 获取完整的URL
const currentUrl = location.toString();
console.log(currentUrl);

🛠️ 实际应用场景

获取URL查询参数

// 假设当前URL是：https://example.com/search?query=javascript&page=2

// 获取整个查询字符串
const queryString = location.search; // 返回 "?query=javascript&page=2"

// 解析具体参数（简单方法）
const urlParams = new URLSearchParams(location.search);
const query = urlParams.get('query'); // 返回 "javascript"
const page = urlParams.get('page');   // 返回 "2"
const sort = urlParams.get('sort');   // 返回 null（因为不存在）

检测页面协议

// 检查是否使用HTTPS协议
if (location.protocol === 'https:') {
    console.log('安全连接');
} else {
    console.log('非安全连接，建议升级到HTTPS');
}

跳转到页面锚点

// 跳转到页面内指定位置
location.hash = '#section2';

// 监听锚点变化
window.addEventListener('hashchange', function() {
    console.log('锚点已变为：', location.hash);
});

重定向到另一个页面

// 根据条件重定向
if (userNotLoggedIn) {
    location.href = '/login';
    // 或者 location.assign('/login')
}

刷新当前页面

// 用户操作后刷新页面
document.getElementById('refreshBtn').addEventListener('click', function() {
    location.reload();
});

🚀 动手练习区

尝试以下操作，观察URL变化（实际应用中不可跨域操作）：

⚠️ 重要注意事项

1. 同源策略限制

出于安全考虑，浏览器不允许通过JavaScript访问不同域（域名）的页面信息。这意味着你只能操作当前页面的URL。

2. 性能考虑

使用 location.href 或 location.assign() 进行页面跳转会触发整个页面的重新加载和渲染，影响用户体验。在现代单页应用(SPA)中，通常使用前端路由库（如React Router、Vue Router）来实现无刷新页面切换。

3. 编码问题

当URL中包含特殊字符（如空格、中文）时，浏览器会自动进行编码：

// 中文参数会被编码
location.search = '?name=张三';
// 实际结果是：?name=%E5%BC%A0%E4%B8%89

4. 修改location的副作用

当你修改location的属性时（如location.href），浏览器会立即开始加载新页面，当前页面的脚本执行会被中断。