如何用js得到当前页面的url信息方法(JS获取当前网址信息)
封面图
•
2025-12-15
•
JavaScript
205
0
0
0
在 JavaScript 中,你可以使用 `window.location` 对象来获取当前页面的 URL 信息。它提供了多个属性和方法,可以用来获取完整的 URL、协议、主机名、路径、查询参数等信息。 --- ## ✅ 一、常用 `window.location` 属性 | 属性 | 说明 | 示例 | |------|------|------| | `window.location.href` | 获取或设置整个 URL | `"https://www.example.com/path?query=1#section"` | | `window.location.protocol` | 获取协议(http 或 https) | `"https:"` | | `window.location.host` | 获取主机名和端口号 | `"www.example.com:8080"` | | `window.location.hostname` | 获取主机名(不带端口) | `"www.example.com"` | | `window.location.port` | 获取端口号 | `"8080"` | | `window.location.pathname` | 获取路径部分 | `"/path"` | | `window.location.search` | 获取查询字符串(包括 `?`) | `"?query=1"` | | `window.location.hash` | 获取锚点部分(包括 `#`) | `"#section"` | --- ## ✅ 二、获取当前网址信息的方法示例 ```javascript // 获取完整 URL const fullUrl = window.location.href; console.log("完整 URL:", fullUrl); // 获取协议(http 或 https) const protocol = window.location.protocol; console.log("协议:", protocol); // 获取主机名和端口 const host = window.location.host; console.log("主机名和端口:", host); // 获取主机名(不带端口) const hostname = window.location.hostname; console.log("主机名:", hostname); // 获取端口 const port = window.location.port; console.log("端口:", port); // 获取路径 const pathname = window.location.pathname; console.log("路径:", pathname); // 获取查询参数(包括 ?) const search = window.location.search; console.log("查询参数:", search); // 获取锚点(包括 #) const hash = window.location.hash; console.log("锚点:", hash); ``` --- ## ✅ 三、解析查询参数(Query String) 如果你需要获取查询参数中的键值对,可以用以下方式: ```javascript const searchParams = new URLSearchParams(window.location.search); const queryParam = searchParams.get('query'); // 获取 key 为 'query' 的值 console.log("查询参数 query 的值:", queryParam); ``` --- ## ✅ 四、总结 | 目标 | 方法 | |------|------| | 获取完整 URL | `window.location.href` | | 获取协议 | `window.location.protocol` | | 获取主机名 | `window.location.hostname` | | 获取路径 | `window.location.pathname` | | 获取查询参数 | `new URLSearchParams(window.location.search)` | --- 如需进一步处理 URL,也可以使用 `URL` 构造函数: ```javascript const url = new URL(window.location.href); console.log(url.protocol, url.hostname, url.pathname, url.search); ``` 如有更多需求,比如修改 URL、跳转页面等,也可以继续问我 😊
上一篇:
JavaScript decodeURIComponent() 函数
下一篇:
js获取地址中get参数
标题录入,一次不能超过6条
留言
评论