JS获取几种URL地址的方法小结

关于 JS获取几种URL地址的方法小结，我准备了如下的攻略：

关于 "JS获取几种URL地址的方法小结"，我准备了如下的攻略：

1. 前言

在前端开发中，获取URL地址的能力是非常常见也非常重要的技能。 获取URL地址的方法也是多种多样的。 在本篇攻略中，我们会讲解JavaScript中获取URL地址的几个常用方法。

2. JavaScript获取URL地址的几种方法的小结

2.1. 通过window.location获取URL信息

通过window.location获取URL地址，可以获取到当前url的完整信息，包括协议、域名、端口号、路径名、查询参数、锚点等信息。以下是一个示例：

console.log('当前页面的完整URL为：', window.location.href);
console.log('当前页面的协议为：', window.location.protocol);
console.log('当前页面的域名为：', window.location.hostname);
console.log('当前页面的端口号为：', window.location.port);
console.log('当前页面的路径名为：', window.location.pathname);
console.log('当前页面的查询参数为：', window.location.search);
console.log('当前页面的锚点为：', window.location.hash);

2.2. 通过document.URL获取URL信息

除了通过window.location获取URL地址外，还可以通过document.URL属性来获取页面的URL。 使用document.URL与使用window.location.href获取页面的完整URL地址是等价的。以下是一个示例：

console.log('当前页面的完整URL为：', document.URL);
console.log('当前页面的协议为：', window.location.protocol);
console.log('当前页面的域名为：', window.location.hostname);
console.log('当前页面的端口号为：', window.location.port);
console.log('当前页面的路径名为：', window.location.pathname);
console.log('当前页面的查询参数为：', window.location.search);
console.log('当前页面的锚点为：', window.location.hash);

2.3. 通过location.href获取URL信息

除了window.location和document.URL以外，location.href属性也可以获取当前页面的URL地址，并且也是获取页面完整URL信息的手段。以下是一个示例：

console.log('当前页面的完整URL为：', location.href);
console.log('当前页面的协议为：', location.protocol);
console.log('当前页面的域名为：', location.hostname);
console.log('当前页面的端口号为：', location.port);
console.log('当前页面的路径名为：', location.pathname);
console.log('当前页面的查询参数为：', location.search);
console.log('当前页面的锚点为：', location.hash);

3. 总结

在本篇攻略中，我们讲解了JavaScript获取URL地址的几种常用方法，包括通过window.location、document.URL、location.href获取页面的URL信息。了解并掌握这些常用方法可以帮助我们更加方便地获取URL信息，从而更好地进行前端开发。

以上就是关于“JS获取几种URL地址的方法小结”的完整攻略。