HoRain云--JavaScript导航神器：玩转WindowLocation
🎬 HoRain 云小助手：个人主页
⛺️生活的理想，就是为了理想的生活!
⛳️ 推荐
前些天发现了一个超棒的服务器购买网站，性价比超高，大内存超划算！忍不住分享一下给大家。点击跳转到网站。
目录
⛳️ 推荐
JavaScript Window Location：网页导航的"导航仪"
什么是Window Location？
一、常用属性（读取URL信息）
二、常用方法（控制页面跳转）
三、超实用小技巧
1. 无刷新获取URL参数
2. 实现"锚点"跳转
3. 表单提交时动态修改URL
四、使用注意事项
五、为什么这个"导航仪"这么重要？
JavaScript Window Location：网页导航的"导航仪"
嘿！看到你对JavaScript的Window Location感兴趣，这可是前端开发中超级实用的工具呢！让我用轻松的方式给你讲讲这个"导航仪"怎么用吧~
什么是Window Location？
简单来说，window.location是JavaScript中用来获取和修改当前页面URL的对象，就像浏览器的"地址栏管理器"一样。它能让你轻松读取当前页面的URL信息，也能控制浏览器跳转到新页面。
💡小贴士：在代码中，你可以省略
window前缀直接用location，比如location.href而不是window.location.href。
一、常用属性（读取URL信息）
| 属性 | 作用 | 示例 |
|---|---|---|
href | 返回完整URL | http://example.com/page.html?query=1#section |
hostname | 返回域名 | example.com |
pathname | 返回路径 | /page.html |
protocol | 返回协议 | http: |
port | 返回端口号 | 8080 |
search | 返回查询参数 | ?query=1 |
hash | 返回锚点 | #section |
host | 返回主机名+端口 | example.com:8080 |
实际使用小例子：
console.log("当前完整URL: " + location.href); console.log("当前域名: " + location.hostname); console.log("当前路径: " + location.pathname); console.log("查询参数: " + location.search);二、常用方法（控制页面跳转）
| 方法 | 作用 | 使用场景 |
|---|---|---|
assign(url) | 加载新页面 | 跳转到新页面，可后退 |
replace(url) | 替换当前页面 | 跳转到新页面，不能后退 |
reload() | 刷新当前页面 | 刷新页面 |
示例：
// 跳转到百度（可后退） location.assign("https://www.baidu.com"); // 跳转到百度（不可后退，常用于登录后跳转） location.replace("https://www.baidu.com"); // 刷新当前页面 location.reload();三、超实用小技巧
1. 无刷新获取URL参数
// 假设URL是: http://example.com?name=John&age=30 const params = new URLSearchParams(location.search); console.log(params.get('name')); // 输出: John console.log(params.get('age')); // 输出: 302. 实现"锚点"跳转
// 跳转到当前页面的#section部分 location.hash = '#section';3. 表单提交时动态修改URL
document.querySelector('form').onsubmit = function() { location.search = '?q=' + this.querySelector('input').value; return false; // 阻止默认表单提交 };四、使用注意事项
SEO友好：用
assign()或replace()进行页面跳转，而不是直接给href赋值，避免SEO问题。端口问题：浏览器通常不会显示默认端口（如http的80端口），所以
location.port在使用默认端口时可能返回空。路径问题：使用相对路径比绝对路径更简洁，比如
/page.html而不是http://example.com/page.html。
五、为什么这个"导航仪"这么重要？
想象一下，你正在开发一个电商网站：
- 用户点击"登录"后，需要跳转到登录页
- 用户搜索商品后，需要在不刷新页面的情况下更新URL参数
- 你想要实现"回到顶部"功能，用
location.hash = '#top'就能轻松实现
❤️❤️❤️本人水平有限，如有纰漏，欢迎各位大佬评论批评指正！😄😄😄
💘💘💘如果觉得这篇文对你有帮助的话，也请给个点赞、收藏下吧，非常感谢!👍 👍 👍
🔥🔥🔥Stay Hungry Stay Foolish 道阻且长,行则将至,让我们一起加油吧！🌙🌙🌙