如何在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.tw/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 次瀏覽

啟動您的 職業生涯

完成課程獲得認證

開始
廣告