JS 获取当前页面 URL

最新推荐文章于 2026-05-20 05:37:45 发布

原创最新推荐文章于 2026-05-20 05:37:45 发布 · 1.9k 阅读

27 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#javascript #redis #开发语言

开发语言同时被 2 个专栏收录

531 篇文章

订阅专栏

Java script

169 篇文章

订阅专栏

该文章已生成可运行项目，

在 JavaScript 中，获取当前页面的 URL 有多种方法，主要通过浏览器提供的 window.location 对象或相关属性实现。以下是详细的中文讲解，介绍常用方法、代码示例、使用场景和注意事项。

1. 常用方法

方法 1：使用 `window.location.href`

描述：获取当前页面的完整 URL（包括协议、主机、路径、查询参数和片段标识符）。
适用场景：需要整个 URL 字符串时使用，如分享链接或记录页面地址。

代码示例：

const url = window.location.href;
console.log(url);
// 示例输出: https://example.com/path/page.html?query=123#section

说明：返回完整的 URL 字符串，包含所有部分。

方法 2：使用 `window.location` 的具体属性

描述：window.location 提供分解的 URL 部分，如协议、主机、路径等。
适用场景：需要特定部分的 URL（如域名、查询参数或锚点）。
可用属性：
- protocol：协议（如 https:）。
- host：主机名和端口（如 example.com:80）。
- hostname：主机名（如 example.com）。
- port：端口号（如 80）。
- pathname：路径（如 /path/page.html）。
- search：查询参数（如 ?query=123）。
- hash：片段标识符（如 #section）。

代码示例：

console.log('完整 URL:', window.location.href);
console.log('协议:', window.location.protocol);     // https:
console.log('主机:', window.location.host);         // example.com:80
console.log('主机名:', window.location.hostname);   // example.com
console.log('端口:', window.location.port);         // 80
console.log('路径:', window.location.pathname);     // /path/page.html
console.log('查询参数:', window.location.search);   // ?query=123
console.log('片段:', window.location.hash);         // #section

说明：适合需要单独处理 URL 某部分的场景，如提取查询参数。

方法 3：使用 `document.URL`

描述：返回当前页面的完整 URL（只读字符串）。
适用场景：简单获取完整 URL，与 window.location.href 等效，但不可修改。

代码示例：

const url = document.URL;
console.log(url);
// 示例输出: https://example.com/path/page.html?query=123#section

说明：功能与 window.location.href 相同，但更简洁，仅用于读取。

方法 4：结合 `URL` 对象解析

描述：使用 URL 构造函数解析 URL，获取结构化数据。
适用场景：需要解析查询参数或动态操作 URL 部分。

代码示例：

const url = new URL(window.location.href);
console.log('主机:', url.hostname);       // example.com
console.log('路径:', url.pathname);       // /path/page.html
console.log('查询参数:', url.searchParams.get('query')); // 123
console.log('片段:', url.hash);           // #section

说明：
- url.searchParams 是一个 URLSearchParams 对象，方便处理查询参数。
- 适合复杂 URL 解析，如获取特定参数值。

方法 5：使用 jQuery（结合 DOM 操作）

描述：通过 jQuery 获取 window.location 属性，或操作包含 URL 的 DOM 元素。
适用场景：项目已使用 jQuery，需结合 DOM 操作获取 URL。

代码示例：

// HTML: <a id="link" href="https://example.com">链接</a>
$(document).ready(function() {
    // 获取页面 URL
    const pageUrl = window.location.href;
    console.log('页面 URL:', pageUrl);

    // 获取 DOM 元素中的 URL
    const linkUrl = $('#link').attr('href');
    console.log('链接 URL:', linkUrl);
});

说明：需要引入 jQuery：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

2. 综合示例

以下是一个完整示例，展示如何获取和解析当前页面 URL：

<!DOCTYPE html>
<html>
<head>
    <title>获取 URL 示例</title>
</head>
<body>
    <button onclick="getUrlInfo()">获取 URL 信息</button>
    <div id="output"></div>

    <script>
        function getUrlInfo() {
            const url = window.location.href;
            const urlObj = new URL(url);
            const output = `
                完整 URL: ${url}<br>
                协议: ${urlObj.protocol}<br>
                主机名: ${urlObj.hostname}<br>
                路径: ${urlObj.pathname}<br>
                查询参数: ${urlObj.search}<br>
                特定参数 (query): ${urlObj.searchParams.get('query') || '无'}<br>
                片段: ${urlObj.hash || '无'}
            `;
            document.getElementById('output').innerHTML = output;
        }
    </script>
</body>
</html>

测试：在浏览器中打开，点击按钮显示 URL 各部分信息。
示例 URL：https://example.com/path/page.html?query=123#section。

3. 方法对比

方法	依赖	优点	缺点
`window.location.href`	无	简单直接，获取完整 URL	无法直接解析部分
`window.location` 属性	无	提供分解的 URL 部分，灵活	需要手动组合完整 URL
`document.URL`	无	简洁，只读，等效 `href`	不可修改，仅返回字符串
`URL` 对象	无	结构化解析，方便处理查询参数	浏览器支持较新（IE 不支持）
jQuery	jQuery	结合 DOM 操作，链式调用	需额外引入 jQuery

4. 注意事项

浏览器兼容性：
- window.location 和 document.URL 在所有浏览器中支持。
- URL 对象需要现代浏览器（IE10+ 部分支持，IE11 不支持 searchParams）。
- 检查支持：
```
if (window.URL) {
    const url = new URL(window.location.href);
} else {
    console.log('使用 location.href 回退:', window.location.href);
}
```
安全性：
- 获取 URL 后，需防止 XSS 攻击，过滤用户输入的查询参数：
```
const query = urlObj.searchParams.get('query')?.replace(/[<>]/g, '');
```
- 如果 URL 包含敏感信息（如 token），避免直接暴露。

动态 URL：

页面通过 JavaScript 修改 location.hash 或 location.search 时，实时获取：

window.addEventListener('hashchange', () => {
    console.log('片段变化:', window.location.hash);
});

性能：
- 获取 location 属性是即时操作，性能开销极低。
- URL 对象解析稍有开销，但适合复杂操作。
特殊字符：
- 查询参数可能包含编码字符（如 %20），用 decodeURIComponent 解码：
```
const param = decodeURIComponent(urlObj.searchParams.get('query'));
```

5. 总结

首选方法：window.location.href 简单获取完整 URL；URL 对象解析具体部分。
动态场景：结合 window.location 属性或 URL.searchParams 处理查询参数。
jQuery 项目：用 $(selector).attr('href') 获取 DOM 中的 URL。
选择依据：
- 简单需求：window.location.href 或 document.URL。
- 需要解析：URL 对象。
- 结合 DOM：jQuery 或 querySelector。
测试：确保在 HTTPS 或本地环境中测试，验证查询参数和片段处理。