如何在JavaScript中获取当前网页的协议和页面路径？

协议

URL 中指定要使用的數據傳輸協議的部分稱為 URL 的協議。在此示例中，https:// 指示使用 HTTPS 協議。

在本文中，我们将学习如何获取当前查看的网页或网站的网站 URL。“URL”属性，它包含有关当前 URL 的数据，用于获取当前 URL。 “URL”属性返回一个字符串，其中包含当前查看页面的完整地址以及 HTTP 协议，例如 (http://)。

语法

以下是协议方法的语法

protocol = location.protocol;

示例 1

在此示例中，让我们了解如何使用 location.protocol 属性返回 URL 的协议方案以及最后的冒号 (:)。当前 URL 使用的协议主要由 window.location.protocol 属性返回 −

<!DOCTYPE html>
<html>
   <title>How to get the protocol and page path of the current web page in JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <div id="result"></div>
   <script>
      const webUrl = new URL('https://tutorialspoint.com/index.htm');
      
      document.getElementById("result").innerHTML =webUrl.protocol;
   </script>
</body>
</html>

示例 2

在此示例中，让我们了解如何使用 url.protocol 属性返回 URL 的协议方案以及最后的冒号 (:)。

<!DOCTYPE html>
<html>
   <title>How to get the protocol and page path of the current web page in JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>
 <body>
   <p>Protocol is: <span class="protocol"></span></p>
   <button onclick="protDetails()">
   Click ME
   </button>
   <script type="text/javascript">
      function protDetails() {
         current_url = window.location.href;
         url_object = new URL(current_url);
         getProtocol = url_object.protocol;

         document.querySelector('.protocol').textContent = getProtocol;
      }
      </script>
</body>
</html>

当前网页的页面路径

Web 客户端想要访问主机服务器上的特定资源，而主机服务器上的路径名指示在哪里查找该资源。例如，/htdocs 目录充当 apache Web 服务器的根目录，其中的任何内容都可以通过其路径查看。location 对象（可以使用 window.location 轻松访问）包含有关网页当前 URL 的所有详细信息。

在此示例中，我们将使用 JavaScript 获取当前页面的 URL，然后将其保存在变量中。之后，我们将显示网页的当前 URL。

借助 window.location.href 属性，window.location 对象将返回当前网页 URL

示例 3

在此示例中，让我们了解如何在下面的代码中将页面的当前 URL 存储在变量“result”中。然后，使用其 ID 选择 div 标签后，使用 innerHTML 属性设置 HTML 内容。我们将包含当前显示页面的 URL 的变量发送到我们的 HTML 内容。

在您的浏览器上运行代码。您将能够在网页上看到当前页面 URL。

<!DOCTYPE html>
<html>
   <title>How to get the protocol and page path of the current web page in JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
   <div id="result"></div>
<body>
   <script type="text/javascript">
      let getURL = window.location.href;
      document.getElementById("result").innerHTML = getURL;
   </script>
</body>
</html>

示例 4

在此示例中，让我们了解如何通过检查 window.location.pathname 属性来查找当前页面的路径名。

<!DOCTYPE html>
<html>
   <title>How to get the protocol and page path of the current web page in JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
   <div id="result"></div>
<body>
   <script type="text/javascript">
      document.getElementById("result").innerHTML = "The Current Web page path is: " + window.location.pathname;
   </script>
</body>
</html>

简而言之

在 JavaScript 中，您可以使用 window.location.href 属性来检索当前网页的 URL，如上面的示例所示。

获取当前页面的 URL 使您可以快速执行所需的任何操作。在本文中，我们查看了一些在捕获 URL 后可以执行的操作以及如何在 JavaScript 代码中执行该方法以实现这些功能。

更新于：2022年8月4日

597 次浏览

启动您的 职业生涯

完成课程获得认证

开始
广告