JS 获取当前页面 URL
在 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）。- 检查支持：
javascript if (window.URL) { const url = new URL(window.location.href); } else { console.log('使用 location.href 回退:', window.location.href); } - 安全性：
- 获取 URL 后，需防止 XSS 攻击，过滤用户输入的查询参数：
javascript const query = urlObj.searchParams.get('query')?.replace(/[<>]/g, ''); - 如果 URL 包含敏感信息（如 token），避免直接暴露。
- 动态 URL：
- 页面通过 JavaScript 修改
location.hash或location.search时，实时获取：javascript window.addEventListener('hashchange', () => { console.log('片段变化:', window.location.hash); }); - 性能：
- 获取
location属性是即时操作，性能开销极低。 URL对象解析稍有开销，但适合复杂操作。- 特殊字符：
- 查询参数可能包含编码字符（如
%20），用decodeURIComponent解码：javascript 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 或本地环境中测试，验证查询参数和片段处理。
如果需要特定场景的实现（如提取特定查询参数、处理 URL 重定向），或其他 JavaScript 相关问题，请提供更多细节，我可以进一步优化回答！