获取当前页面的完整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=<script>alert(‘hack’);</script>，那么页面上就会执行这个恶意脚本。 最佳实践是： 任何从URL中获取并用于页面渲染或代码执行的数据，都必须进行严格的输入验证和输出编码（如HTML实体编码）。这与获取URL本身无关，而是与如何使用获取到的数据有关。
-
URL长度限制： 尽管现代浏览器对URL的长度限制放宽了很多（通常在2000-8000个字符之间，取决于浏览器），但理论上仍然存在上限。如果你的应用需要传递大量数据通过URL参数，可能需要考虑使用POST请求或其他存储方式（如LocalStorage、sessionstorage）来避免URL过长的问题。
理解这些细节，能帮助我们更健壮、更安全地利用BOM来处理URL，避免一些不必要的麻烦。
