logo
Published on

获取当前网站URL的JavaScript技巧

Authors
  • Name
    Twitter

在开发网页时，我们常常需要获取当前页面的URL。例如，当网页加载时，我们可能希望获取全URL并将其存储在一个变量中，以便后续操作。本文将介绍如何使用纯JavaScript获取当前网页的URL，并讨论不同方法的优缺点。

获取当前URL的基本方法

获取当前网页URL最简单、最常用的方法是使用window.location.href。

let currentUrl = window.location.href;

这是最常见的做法，可以确保在所有主流浏览器中正常工作。

document.URL方法

另一种获取当前URL的方法是使用document.URL。然而，这种方法在某些浏览器中可能存在问题，例如在Firefox中可能会出现Bug。

let currentUrl = document.URL;

虽然document.URL在大多数情况下能正常工作，但建议还是使用window.location.href更为稳妥。

URL的基本结构

在进一步深入之前，我们先了解一下URL的基本结构：

<protocol>//<hostname>:<port>/<pathname><search><hash>

每个部分的解释如下：

  • protocol: 协议，用于访问网络资源（如HTTP或HTTPS）。
  • hostname: 主机名，表示拥有资源的主机（如www.stackoverflow.com）。
  • port: 端口号，用于识别特定网络服务。
  • pathname: 路径，指定主机内特定资源的位置。
  • search: 查询字符串，提供额外信息（如查询参数）。
  • hash: 锚点，URL中的哈希部分（包含#）。

通过 Location 对象获取URL各部分

JavaScript提供了一系列方法可以读取和改变当前URL，这些方法主要依赖于Location对象。Location对象是window对象的一个属性。

let currentLocation = window.location;

通过Location对象的属性，可以获取上述URL结构的各个部分：

  • href - 整个URL
  • protocol - URL的协议
  • host - 主机名和端口号
  • hostname - 主机名
  • port - 端口号
  • pathname - 路径名
  • search - 查询字符串部分
  • hash - 锚点部分
  • origin - 协议 + 主机名

示例代码

以下是通过Location对象的各个属性获取URL不同部分的示例：

console.log('整个URL:', window.location.href);
console.log('协议:', window.location.protocol);
console.log('主机:', window.location.host);
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);
console.log('来源:', window.location.origin);

上述代码将在控制台中打印当前页面URL的各个部分。

局部路径和其他信息

在实际项目中，我们可能只需获取URL的一部分，比如路径或查询字符串。这时，可以直接使用Location对象的相应属性：

  • 获取相对路径：window.location.pathname
  • 获取主机名：window.location.hostname
  • 获取协议：window.location.protocol
  • 获取锚点部分：window.location.hash

示例代码

console.log('相对路径:', window.location.pathname);
console.log('主机名:', window.location.hostname);
console.log('协议:', window.location.protocol);
console.log('锚点:', window.location.hash);

通过这些属性，我们可以方便地获取URL的特定部分，进行进一步处理。

总结

获取当前网页URL是网页开发中的一项基本技巧。本文介绍了如何使用window.location.href、document.URL等方法获取当前URL的各种部分，并对其进行了详细说明和示例展示。希望这些内容对你在实际项目中处理URL相关问题时有所帮助。