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

想知道JavaScript如何获取当前页面URL？本文为你详细解读`window.location.href`属性的妙用，这是获取完整URL（包含协议、域名、路径、参数和哈希值）最直接的方法。不仅如此，文章还深入剖析了`window.location`对象的其他实用属性，如`protocol`、`host`、`pathname`等，助你轻松提取URL的各个组成部分。更进一步，我们还将学习如何利用`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长度限制等问题，以确保代码的安全性和健壮性。

要获取当前页面的完整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参数，它让代码更清晰、更健壮。

获取URL时可能遇到的挑战与安全考量？

虽然获取URL看起来很简单，但实际开发中，还是有一些细节和潜在的问题需要我们留意。这不仅仅是技术实现的问题，有时也涉及到用户体验和安全性。

• URL编码与解码： 当URL中包含非ASCII字符（如中文）或特殊字符（如空格、&、=等）时，它们会被URL编码。例如，空格会变成%20，中文字符会变成%E4%BD%A0%E5%A5%BD。虽然window.location.href返回的是已编码的完整URL，但当你从window.location.search中取出参数值时，如果这些值本身是编码过的，你可能需要使用decodeURIComponent()来解码，以便获取原始的、可读的字符串。URLSearchParams在获取值时通常会自动解码，但在手动处理时要特别注意。

  // 假设URL是 ?query=%E4%BD%A0%E5%A5%BD
  const searchParams = new URLSearchParams(window.location.search);
  console.log(searchParams.get('query')); // 自动解码: "你好"
  
  // 如果是手动解析
  const encodedValue = '%E4%BD%A0%E5%A5%BD';
  console.log(decodeURIComponent(encodedValue)); // "你好"

• 相对路径与绝对路径： window.location.href总是返回绝对路径。但在某些情况下，如果你的页面中使用了标签来定义基础URL，那么页面内部的一些相对路径（如标签的href、标签的src）可能会受到影响。window.location属性不受标签的影响，它始终反映浏览器地址栏中的URL。这是一个容易混淆的点，我曾因此踩过坑，以为页面上的相对链接会直接拼接在window.location.pathname后面，结果发现并不是。

• URL的安全性考量（XSS风险）： 直接获取URL本身通常不是安全风险，但当你将URL的某个部分（尤其是查询参数或哈希值）不加过滤地直接显示在页面上，或者用于构建新的HTML、JavaScript代码时，就可能引入跨站脚本攻击（XSS）的风险。恶意用户可以通过构造包含恶意脚本的URL，来窃取用户信息或进行其他破坏。

  例如，如果你的代码是这样： document.getElementById('welcomeMessage').innerHTML = '欢迎，' + new URLSearchParams(window.location.search).get('name'); 如果恶意用户访问your-site.com/?name=，那么页面上就会执行这个恶意脚本。 最佳实践是： 任何从URL中获取并用于页面渲染或代码执行的数据，都必须进行严格的输入验证和输出编码（如HTML实体编码）。这与获取URL本身无关，而是与如何使用获取到的数据有关。

• URL长度限制： 尽管现代浏览器对URL的长度限制放宽了很多（通常在2000-8000个字符之间，取决于浏览器），但理论上仍然存在上限。如果你的应用需要传递大量数据通过URL参数，可能需要考虑使用POST请求或其他存储方式（如LocalStorage、SessionStorage）来避免URL过长的问题。

理解这些细节，能帮助我们更健壮、更安全地利用BOM来处理URL，避免一些不必要的麻烦。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。