返回
window.location备忘单：你的浏览器定位导向器
前端
2024-01-19 21:18:15
浏览网络：揭秘 Window.location 对象
前言
准备好踏上网络之旅，探索操纵 URL 和导航页面的利器——window.location 对象。了解它的属性和方法，让你的 JavaScript 应用如虎添翼。
Window.location 的属性
window.location 对象提供了丰富的属性，让你深入了解当前页面的 URL 信息：
- href： 完整的 URL 字符串，包括协议、主机名、端口、路径和查询字符串。
- protocol： URL 的协议，如 "http" 或 "https"。
- host： 主机名和端口号，如 "example.com:80"。
- hostname： 主机名，不包括端口号，如 "example.com"。
- port： 端口号，如 "80"。
- pathname： URL 路径，不包括查询字符串，如 "/path/to/page.html"。
- search： 查询字符串，以问号 "?" 开头，如 "?q=my+search+query"。
- hash： 哈希，以井号 "#" 开头，如 "#my-section"。
Window.location 的方法
除了属性，window.location 对象还提供了几个方法，让你控制 URL，实现页面跳转：
- assign()： 将当前页面的 URL 替换为新的 URL。
- replace()： 将当前页面的 URL 替换为新的 URL，但不会在浏览器的历史记录中添加新条目。
- reload()： 重新加载当前页面。
- toString()： 返回当前页面的 URL 字符串。
代码示例
// 获取当前页面的 URL
const currentURL = window.location.href;
// 访问当前页面的协议
const protocol = window.location.protocol;
// 访问当前页面的主机名
const hostname = window.location.hostname;
// 访问当前页面的端口号
const port = window.location.port;
// 访问当前页面的路径
const pathname = window.location.pathname;
// 访问当前页面的查询字符串
const search = window.location.search;
// 访问当前页面的哈希
const hash = window.location.hash;
// 重新加载当前页面
window.location.reload();
// 跳转到新的页面
window.location.href = "https://example.com";
结论
window.location 对象是一个强大的 JavaScript 工具，让你轻松获取、操作和导航 URL。掌握其属性和方法，解锁高级 Web 应用程序开发的可能性。
常见问题解答
-
如何获取当前页面的完整 URL？
- 使用
window.location.href属性。
- 使用
-
如何修改页面的 URL 并跳转到新页面？
- 使用
window.location.href属性来设置新 URL。
- 使用
-
如何重新加载当前页面？
- 使用
window.location.reload()方法。
- 使用
-
如何访问查询字符串中的参数？
- 使用
window.location.search属性并解析它。
- 使用
-
如何创建不添加历史记录条目的新页面？
- 使用
window.location.replace()方法。
- 使用
