直接用 location.href 就能获取当前页面的完整 url 字符串;它还有 protocol、host、hostname、port、pathname、search、hash 等只读属性,分别返回 url 各部分;修改需用 assign 或 replace。

直接用 window.location.href 就能获取当前页面的完整 URL 字符串。
location 对象的核心属性
window.location 是 BOM 中最常用的对象之一,它提供了当前页面 URL 的结构化信息。除了 href,还有几个常用只读属性:
-
href:完整的 URL 字符串(如
"https://example.com/path/?a=1&b=2#section1") -
protocol:协议名,含冒号和双斜杠(如
"https:") -
host:主机名 + 端口号(如
"example.com:8080") -
hostname:纯主机名(如
"example.com") - port:端口号(默认端口如 80/443 通常为空字符串)
-
pathname:路径部分(如
"/path/") -
search:查询参数(即 ? 后面的部分,如
"?a=1&b=2") -
hash:锚点(即 # 后面的部分,如
"#section1")
快速获取完整 URL 的几种写法
以下写法效果完全相同,都返回当前页面的完整 URL:
window.location.href-
location.href(window 可省略) -
document.location.href(兼容写法,但不推荐,document.location是只读别名)
推荐统一使用 location.href,简洁且语义清晰。
注意:href 是只读的,修改需用 assign 或 replace
不能通过赋值修改 location.href 来跳转(会报错或被忽略),正确方式是:
-
location.assign("https://new-url.com"):添加历史记录,可后退 -
location.replace("https://new-url.com"):替换当前页,不可后退 -
location.href = "https://new-url.com":实际等价于assign,但语义稍弱
小技巧:解析 query 参数
location.search 返回的是带 ? 的字符串(如 "?name=John&age=25"),如需提取参数,可手动解析或用 URLSearchParams:
const params = new URLSearchParams(location.search);
console.log(params.get("name")); // "John"
console.log(params.has("age")); // true
该 API 兼容现代浏览器(IE 不支持,需 polyfill 或正则替代)。
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











