如何在 JavaScript 中获取当前 URL？

2025年4月19日 | 阅读 5 分钟

在 Web 中，当前 URL 对于多种用例非常重要，例如分析跟踪、动态渲染或基于页面 URL 实现条件逻辑。JavaScript 提供了一些方法和属性，可以帮助开发人员操作当前网页的 URL。

在本文中，我们将讨论获取当前 URL 的不同方法，并且还将通过实际示例理解这些方法的使用。阅读本指南后，您将能够轻松地在 JavaScript 应用程序中获取和使用 URL。

什么是 URL？

URL（统一资源定位符）是对互联网上资源的引用。URL 结构包括协议（HTTP 或 HTTPS）、域名、端口（可选）以及路径、查询参数和片段标识符等组件。例如，在 URL https://example.com/page?id=123#section1 中，https 是协议，example.com 是域名，/page 是路径，id=123 和 #section1 是查询参数。任何基于服务器的 Web 应用程序的生成都依赖于能够通过 URL 识别路由、动态内容和 API 端点。

了解 window.location 对象

在 JavaScript 中使用 window 来获取当前 URL 是最简单且最常用的方法之一。它包含表示 URL 各个组件的属性，并包含用于解析当前文档 URL 的每个组件的有用属性。

以下是 window.location 方法的重要属性

window.location.href： 返回一个包含整个 URL 的字符串。
window.location.protocol： 提供协议（例如，http: 或 https:）。
window.location.hostname： 返回 URL 的域名（example.com）。
window.location.port： 如果存在，则给出端口号（例如 8080）。
window.location.pathname：给出 URL 的路径，例如（/about-us）。
window.location.search：给出查询字符串，以 ? 开头（例如，? id=123）。
window.location.hash：给出片段标识符，前面带有 #（即 #section1）。

示例：获取完整 URL

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Get Current URL</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #f4f4f9;
      }

      .container {
        text-align: center;
        background: #ffffff;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      }

      button {
        background-color: #007bff;
        color: #ffffff;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
        font-size: 16px;
        cursor: pointer;
        transition: background-color 0.3s;
        width: 300px;
      }

      button:hover {
        background-color: #0056b3;
      }

      .output {
        margin-top: 20px;
        font-size: 16px;
        color: #333333;
        font-weight: 600;
      }

    </style>
  </head>
  <body>
    <div class="container">

      <h1>Get Current URL</h1>
      <button id="getUrlButton">Show Current URL</button>
      <div class="output" id="urlOutput"></div>
    </div>

    <script>
      document
        .getElementById("getUrlButton")
        .addEventListener("click", function () {
          const currentUrl = window.location.href;
          document.getElementById("urlOutput").textContent = `${currentUrl}`;
        });
    </script>
  </body>
</html>

输出

浏览器

How to Get the Current URL in JavaScript?

程序输出

示例：提取 URL 的各个部分

您可以使用 window.location 对象的其他属性来提取 URL 的特定部分。

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Get Current URL Details</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #f4f4f9;
      }

      .container {
        text-align: center;
        background: #ffffff;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      }

      button {
        background-color: #007bff;
        color: #ffffff;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
        font-size: 16px;
        cursor: pointer;
        transition: background-color 0.3s;
      }

      button:hover {
        background-color: #0056b3;
      }

      table {
        margin: 20px auto 0;
        border-collapse: collapse;
        width: 100%;
        max-width: 600px;
      }

      table,
      th,
      td {
        border: 1px solid #dddddd;
      }

      th,
      td {
        padding: 8px 12px;
        text-align: left;
      }

      th {
        background-color: #f4f4f9;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>Get Current URL Details</h1>
      <button id="getUrlButton">Show URL Details</button>
      <table id="urlDetailsTable" style="display: none">
        <thead>
          <tr>
            <th>Property</th>
            <th>Value</th>
          </tr>
        </thead>
        <tbody id="urlDetailsBody"></tbody>
      </table>
    </div>

    <script>
      document
        .getElementById("getUrlButton")
        .addEventListener("click", function () {
          const urlDetails = [
            { property: "Protocol", value: window.location.protocol },
            { property: "Hostname", value: window.location.hostname },
            {
              property: "Port",
              value: window.location.port || "(none specified)",
            },
            { property: "Pathname", value: window.location.pathname },
            {
              property: "Query String",
              value: window.location.search || "(none specified)",
            },
            {
              property: "Hash",
              value: window.location.hash || "(none specified)",
            },
          ];

          const tableBody = document.getElementById("urlDetailsBody");
          tableBody.innerHTML = "";

          urlDetails.forEach((detail) => {
            const row = document.createElement("tr");
            row.innerHTML = `<td>${detail.property}</td><td>${detail.value}</td>`;
            tableBody.appendChild(row);
          });

          document.getElementById("urlDetailsTable").style.display = "table";
        });
    </script>
  </body>
</html>

输出

浏览器

程序输出

使用 document.URL 属性

获取完整 URL 的一种非常简单的方法是使用 document.URL 属性。此属性以字符串形式给出当前文档的完整 URL。

示例

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Get Full URL</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #f4f4f9;
      }

      .container {
        text-align: center;
        background: #ffffff;
        width: 300px;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      }

      button {
        background-color: #007bff;
        color: #ffffff;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
        font-size: 16px;
        cursor: pointer;
        transition: background-color 0.3s;
      }

      button:hover {
        background-color: #0056b3;
      }

      .output {
        margin-top: 20px;
        font-size: 16px;
        color: #333333;
        word-wrap: break-word;
        max-width: 600px;
        font-weight: 600;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>Get Full URL</h1>
      <button id="getFullUrlButton">Show Full URL</button>
      <div class="output" id="fullUrlOutput"></div>
    </div>

    <script>
      document
        .getElementById("getFullUrlButton")
        .addEventListener("click", function () {
          const fullUrl = document.URL;
          document.getElementById("fullUrlOutput").textContent = `${fullUrl}`;
        });
    </script>
  </body>
</html>

输出

浏览器

程序输出

这是一种直接的做法，但通常不使用，因为 window.location 对象提供了更多选项，并且包含更多用于操作 URL 的属性。

获取当前 URL 的实际用例

分析跟踪：跟踪当前 URL 以了解用户行为和页面访问情况。
条件渲染：根据 URL 或查询参数渲染组件。
动态内容加载：根据 URL 动态获取和显示内容。
SEO 优化：确保正确的 URL 结构以获得更好的搜索引擎索引。
URL 重定向：根据条件重定向到另一个页面。

示例：根据 URL 路径进行重定向

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Pathname Checker</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #f4f4f9;
      }

      .container {
        text-align: center;
        background: #ffffff;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      }

      button {
        background-color: #007bff;
        color: #ffffff;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
        font-size: 16px;
        cursor: pointer;
        transition: background-color 0.3s;
      }

      button:hover {
        background-color: #0056b3;
      }

      .output {
        margin-top: 20px;
        font-size: 16px;
        color: #333333;
        word-wrap: break-word;
        max-width: 600px;
        font-weight: 600;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>Pathname Checker</h1>
      <button id="checkPathnameButton">Check Current Pathname</button>
      <div class="output" id="pathnameOutput"></div>
    </div>

    <script>
      document
        .getElementById("checkPathnameButton")
        .addEventListener("click", function () {
          const pathname = window.location.pathname;
          const output = document.getElementById("pathnameOutput");

          if (pathname === "/login") {
            output.textContent = "User is on the login page.";
          } else {
            output.textContent = "User is not on the login page.";
          }
        });
    </script>
  </body>
</html>

输出

浏览器

程序输出

结论

在 JavaScript 中获取当前 URL 是一项非常基本的技术，有助于构建动态、交互式和用户友好的 Web 应用程序。无论您是使用 window.location 方法、document.URL 方法还是现代 URL 接口，每种方法都有其优点和用例。这些工具最终可以帮助您构建更好的 Web 应用程序。

下一个主题JavaScript 嵌套数组

如何在 JavaScript 中获取当前 URL？

什么是 URL？

了解 window.location 对象

使用 document.URL 属性

获取当前 URL 的实际用例

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

如何在 JavaScript 中获取当前 URL？

什么是 URL？

了解 window.location 对象

使用 document.URL 属性

获取当前 URL 的实际用例

结论

相关帖子

JavaScript 动画库

JavaScript 中的类型转换

按键对 JavaScript 对象数组进行排序

如何在 JavaScript 中添加新行？

JavaScript 为元素添加样式

何时不应在 JavaScript 中使用箭头函数

JavaScript 中的嵌套三元运算符

JavaScript Nullish Coalescing Operator (空值合并运算符)

展开运算符在 JavaScript 中的用法

JavaScript 断点

订阅 Tpoint Tech

联系信息