如何用js得到当前页面的url信息方法(JS获取当前网址信息)

封面图 • 2025-12-15 • JavaScript

在 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、跳转页面等，也可以继续问我 😊