js如何获取当前页面所在的路径

JavaScript 获取当前页面所在的路径的方法有很多，包括使用 window.location 对象、 document.URL 属性、以及 document.location 属性等。其中，最常用的方式是通过 window.location 对象来获取页面 URL 的不同部分。接下来，我们将详细介绍这些方法，并通过具体示例来展示如何使用它们。

window.location 对象

window.location 对象包含有关当前 URL 的信息。它包括以下属性：

• href: 整个 URL 地址。
• protocol: 协议部分，例如 "http:" 或 "https:"。
• hostname: 主机名，例如 "www.example.com"。
• port: 端口号，例如 "8080"。
• pathname: 路径部分，例如 "/path/to/page"。
• search: 查询字符串部分，例如 "?id=123"。
• hash: URL 的哈希部分，例如 "#section1"。

通过这些属性，你可以非常方便地获取当前页面的不同部分。下面详细介绍每个属性，并通过代码示例展示其用法。

一、window.location.href

window.location.href 返回整个 URL 地址，包括协议、主机名、路径、查询字符串和哈希部分。例如：

console.log(window.location.href);

如果当前页面的 URL 是 https://www.example.com/path/to/page?id=123#section1，则输出将是 https://www.example.com/path/to/page?id=123#section1。

二、window.location.protocol

window.location.protocol 返回 URL 的协议部分。例如：

console.log(window.location.protocol);

如果当前页面的 URL 是 https://www.example.com/path/to/page，则输出将是 https:。

三、window.location.hostname

window.location.hostname 返回 URL 的主机名部分。例如：

console.log(window.location.hostname);

如果当前页面的 URL 是 https://www.example.com/path/to/page，则输出将是 www.example.com。

四、window.location.port

window.location.port 返回 URL 的端口号部分。如果 URL 中没有指定端口号，则返回空字符串。例如：

console.log(window.location.port);

如果当前页面的 URL 是 https://www.example.com:8080/path/to/page，则输出将是 8080。

五、window.location.pathname

window.location.pathname 返回 URL 的路径部分。例如：

console.log(window.location.pathname);

如果当前页面的 URL 是 https://www.example.com/path/to/page，则输出将是 /path/to/page。

六、window.location.search

window.location.search 返回 URL 的查询字符串部分，包括问号。例如：

console.log(window.location.search);

如果当前页面的 URL 是 https://www.example.com/path/to/page?id=123，则输出将是 ?id=123。

七、window.location.hash

window.location.hash 返回 URL 的哈希部分，包括井号。例如：

console.log(window.location.hash);

如果当前页面的 URL 是 https://www.example.com/path/to/page#section1，则输出将是 #section1。

八、结合使用 window.location 对象

我们可以结合使用 window.location 对象的多个属性来获取和处理 URL 的不同部分。例如：

const url = window.location;

console.log(`完整的URL: ${url.href}`);
console.log(`协议: ${url.protocol}`);
console.log(`主机名: ${url.hostname}`);
console.log(`端口号: ${url.port}`);
console.log(`路径: ${url.pathname}`);
console.log(`查询字符串: ${url.search}`);
console.log(`哈希: ${url.hash}`);

九、使用 document.URL

document.URL 属性也可以用来获取当前页面的完整 URL。例如：

console.log(document.URL);

如果当前页面的 URL 是 https://www.example.com/path/to/page?id=123#section1，则输出将是 https://www.example.com/path/to/page?id=123#section1。

十、使用 document.location

document.location 属性与 window.location 类似，也可以用来获取当前页面的 URL。例如：

console.log(document.location.href);

如果当前页面的 URL 是 https://www.example.com/path/to/page?id=123#section1，则输出将是 https://www.example.com/path/to/page?id=123#section1。

十一、最佳实践

在实际开发中，推荐使用 window.location 对象来获取当前页面的 URL 和其不同部分，因为它提供了更多的属性和方法。此外，确保在使用这些属性时注意安全问题，特别是在处理用户输入的 URL 时，防止潜在的 XSS 攻击。

十二、获取 URL 参数

有时，我们需要获取 URL 中的查询参数。可以通过解析 window.location.search 来实现。例如：

function getQueryParams() {

  const params = {};
  const queryString = window.location.search.substring(1);
  const pairs = queryString.split("&");
  for (const pair of pairs) {
    const [key, value] = pair.split("=");
    params[decodeURIComponent(key)] = decodeURIComponent(value);
  }
  return params;
}
const queryParams = getQueryParams();
console.log(queryParams);

如果当前页面的 URL 是 https://www.example.com/path/to/page?id=123&name=John，则输出将是 {id: "123", name: "John"}。

十三、处理哈希变化

在某些情况下，我们需要监视 URL 中哈希部分的变化。例如，在单页应用程序（SPA）中，可以使用 hashchange 事件来实现：

window.addEventListener("hashchange", () => {

  console.log(`新的哈希: ${window.location.hash}`);
});

当 URL 中的哈希部分变化时，上述代码将输出新的哈希值。

十四、推荐项目管理系统

在开发过程中，项目管理系统是不可或缺的工具。推荐以下两个系统：

• 研发项目管理系统PingCode：PingCode 是一款专为研发团队设计的项目管理工具，提供了全面的需求管理、任务管理、缺陷管理和版本管理等功能，帮助团队提高协作效率和项目质量。

• 通用项目协作软件Worktile：Worktile 是一款通用的项目协作软件，适用于各类团队和项目，提供了任务管理、时间管理、文件共享和团队沟通等功能，帮助团队更好地协作和管理项目。

十五、总结

通过本文的介绍，我们详细了解了如何使用 JavaScript 获取当前页面的 URL 及其不同部分。我们介绍了 window.location 对象的各个属性，以及如何结合使用这些属性来处理 URL。此外，还介绍了 document.URL 和 document.location 属性的用法。最后，我们还讨论了如何获取 URL 参数和处理哈希变化，并推荐了两个项目管理系统：研发项目管理系统PingCode 和通用项目协作软件Worktile。

希望这篇文章对你有所帮助，能够在实际开发中应用这些知识，提高项目管理和开发效率。

相关问答FAQs：

1. 问题： 如何使用JavaScript获取当前页面的完整路径？
回答： 您可以使用window.location.href来获取当前页面的完整路径。这个属性返回一个字符串，包含当前页面的URL地址，包括协议、主机名、端口号、路径和查询参数。

2. 问题： 如何使用JavaScript获取当前页面的路径（不包括查询参数）？
回答： 您可以使用window.location.pathname来获取当前页面的路径部分，不包括查询参数。这个属性返回一个字符串，表示当前页面的路径部分，不包括协议、主机名、端口号和查询参数。

3. 问题： 如何使用JavaScript获取当前页面的主机名和端口号？
回答： 您可以使用window.location.host来获取当前页面的主机名和端口号。这个属性返回一个字符串，表示当前页面的主机名和端口号部分，不包括协议和路径。如果当前页面是通过IP地址访问的，则返回IP地址和端口号。