当前位置：首页 > 文章列表 > 文章 > 前端 > JS获取当前页面URL方法详解

JS获取当前页面URL方法详解

2025-08-25 21:20:34 0浏览收藏

在JavaScript中，获取当前页面的URL是前端开发中的常见需求。本文详细介绍了如何使用`window.location.href`属性，它是获取完整URL（包括协议、主机名、路径、查询参数和哈希值）最直接的方法。此外，还深入探讨了`window.location`对象的其他属性，如`protocol`、`host`、`pathname`等，以及如何利用`URLSearchParams`接口高效地解析和操作URL查询参数，告别繁琐的手动处理。同时，本文也强调了在处理URL时需要注意的编码解码、相对路径与绝对路径的区别、XSS安全风险以及URL长度限制等问题，旨在帮助开发者编写更安全、更健壮的代码，提升用户体验，是前端工程师必备的URL处理知识点。

获取当前页面的完整URL最直接的方法是使用window.location.href属性。1. window.location.href返回包含协议、主机名、路径、查询参数和哈希值的完整URL字符串；2. window.location对象还提供多个属性用于获取URL的不同部分，如protocol、host、hostname、port、pathname、search、hash和origin；3. 使用URLSearchParams可解析和操作查询参数，通过get、has、set等方法处理键值对，并自动管理编码解码；4. 在处理URL时需注意编码与解码、相对路径与绝对路径的区别、XSS安全风险、以及URL长度限制等问题，以确保代码的安全性和健壮性。

如何用BOM获取当前页面的URL？

要获取当前页面的完整URL，最直接、最常用的方法就是利用浏览器对象模型（BOM）中的window.location.href属性。它会返回一个包含协议、主机名、路径、查询参数和哈希值在内的完整字符串。

解决方案

当我们需要获取当前页面的URL时，JavaScript提供了非常便捷的途径。核心就在于window.location对象。这个对象是BOM（Browser Object Model）的一部分，它封装了当前窗口的URL信息。

最简单粗暴，也最直接有效的方式，就是使用window.location.href。它会返回一个字符串，这个字符串就是当前浏览器地址栏里显示的完整URL。

举个例子，如果你当前在https://www.example.com/products?id=123#section这个页面，那么：

const currentUrl = window.location.href;
console.log(currentUrl); // 输出: "https://www.example.com/products?id=123#section"

这几乎是所有前端开发者获取当前URL的首选。它干净利落，一步到位。当然，window.location对象还有很多其他属性，可以帮助我们更细致地获取URL的各个部分，这在很多场景下非常有用。

BOM中获取URL的常用属性有哪些？

除了window.location.href这个“全能型”选手，window.location对象其实是一个宝藏，它把URL拆解成了好几个更小的、更具体的属性，方便我们按需取用。我个人在开发中经常会用到它们，尤其是在需要根据URL的某个部分做逻辑判断时。

window.location.protocol: 获取URL的协议部分，比如"http:"或"https:"。注意，它会包含冒号。
window.location.host: 获取主机名和端口号的组合，比如"www.example.com:8080"。如果没有指定端口，则不会显示。
window.location.hostname: 仅获取主机名，比如"www.example.com"。这是我判断当前域名最常用的。
window.location.port: 获取端口号，比如"8080"。如果使用默认端口（HTTP 80, HTTPS 443），这个属性通常是空字符串。
window.location.pathname: 获取URL的路径部分，从根目录开始，比如"/products"。这个在路由匹配时特别有用。
window.location.search: 获取URL的查询字符串部分，以问号?开头，比如"?id=123&name=test"。
window.location.hash: 获取URL的哈希（片段标识符）部分，以井号#开头，比如"#section"。这个常用于单页应用（SPA）的内部导航。
window.location.origin: 获取协议、主机名和端口号的组合，类似于protocol + '//' + host。例如"https://www.example.com"。这是一个相对较新的属性，但非常好用，因为它直接提供了“源”的信息，对于跨域请求的判断尤其方便。

举个例子，假设当前URL是https://www.example.com:8080/path/to/page?query=abc#fragment：

console.log(window.location.protocol); // "https:"
console.log(window.location.host);     // "www.example.com:8080"
console.log(window.location.hostname); // "www.example.com"
console.log(window.location.port);     // "8080"
console.log(window.location.pathname); // "/path/to/page"
console.log(window.location.search);   // "?query=abc"
console.log(window.location.hash);     // "#fragment"
console.log(window.location.origin);   // "https://www.example.com:8080"

这些属性的组合使用，几乎可以满足所有对URL进行分析和操作的需求。

如何解析和操作URL参数？

获取到window.location.search之后，我们通常会面临一个问题：如何把像?id=123&name=test这样的字符串，解析成我们可以在代码中方便使用的键值对？以前，大家可能会手写一些字符串分割和循环的逻辑，甚至用正则。但现在，浏览器提供了一个更现代、更强大的API：URLSearchParams。

URLSearchParams接口提供了一种简单的方法来处理URL的查询字符串。它就像一个Map对象，可以轻松地添加、删除、获取和遍历URL参数。我个人觉得，有了它，处理URL参数的那些繁琐工作简直是解放了。

要使用它，你可以直接传入window.location.search：

const params = new URLSearchParams(window.location.search);

// 获取特定参数的值
const userId = params.get('id');
console.log('用户ID:', userId); // 如果URL是 ?id=123，则输出 "用户ID: 123"

const userName = params.get('name');
console.log('用户名:', userName); // 如果URL是 ?name=Alice，则输出 "用户名: Alice"

// 检查某个参数是否存在
if (params.has('debug')) {
    console.log('调试模式已开启');
}

// 遍历所有参数
console.log('所有参数:');
for (const [key, value] of params.entries()) {
    console.log(`${key}: ${value}`);
}

// 添加或修改参数
params.set('source', 'website');
params.append('tag', 'new'); // append会保留同名参数，set会覆盖
console.log('修改后的查询字符串:', params.toString()); // 会输出类似 "id=123&name=test&source=website&tag=new"

如果你需要构建一个新的URL查询字符串，URLSearchParams也同样方便：

const newParams = new URLSearchParams();
newParams.set('page', '2');
newParams.set('sort', 'price');
console.log(newParams.toString()); // 输出 "page=2&sort=price"

然后你可以把这个字符串拼接到新的URL中。URLSearchParams会自动处理URL编码/解码，这大大减少了出错的可能性，也省去了我们手动调用encodeURIComponent和decodeURIComponent的麻烦。强烈推荐使用这个API来处理URL参数，它让代码更清晰、更健壮。