首頁 > 文章 > web前端 > 如何使用 JavaScript 檢查 URL 是否包含雜湊值？

如何使用 JavaScript 檢查 URL 是否包含雜湊值？

王林轉載: 2023-09-07 14:57:111129瀏覽

如何使用 JavaScript 检查 URL 是否包含哈希值？

概述

使用 JavaScript 檢查統一資源定位器 (U.R.L.) 是否包含雜湊值 (#text)，因為 JavaScript 包含一些預先建構方法，這使得獲得特定目標成為一項簡單的任務。這可以透過使用 JavaScript 中的 hash 屬性來完成，該屬性可以透過初始化 window.location 物件來存取。它簡化了用戶介面並提供了最重要的網頁導航。

要建立此解決方案，我們需要以下主題的先驗知識 -

HTML- 建構頁面的骨架。其中我們將使用內部 7239f9c7b7d151b366b41e07a1e7636c 標記。
HTML 事件（onclick()、onchange() 等）
JavaScript 視窗物件、位置物件、雜湊屬性。

文法

該程式使用的基本語法是 -

window.location.hash

Window - 這是指定 Web 瀏覽器框架的 JavaScript 物件。它可以處理與您的瀏覽器相關的方法。 windows的屬性可以透過

文法:

(window.property/methodName)

Location - 它是視窗物件的屬性，包含目前網頁 URL 的資訊。

文法:

window.location.propertyName

Hash - 它是包含 # 之後文字的位置物件的屬性。如果 URL 包含「/tutorialspoint/#java」。然後location.hash將傳回值“java”。

演算法

第 1 步- 使用 bb9345e55eb71822850ff156dfde57c8 標籤
建立 HTML 按鈕
第2 步驟- 在按鈕標籤a649a1e36deee2637e424238206df632 中插入onclick 事件，並在其中插入函數，如bc8ce6b7ab8022643fcea1b2d7c908fa。函數名稱是使用者定義的，因此您可以根據自己的方便進行更改。
第 3 步- 建立 JavaScript 箭頭函數 checkHash()。
第 4 步- 使用window物件方法location和位置方法hash。將 window.location.hash 的結果儲存在變數中。
第 5 步- 在 if-else 中傳遞變數作為條件。
第6 步驟- 如果if-else 中傳遞的變數為true，則傳回“Hash found”，否則如果傳遞的變數為false，則傳回“Hash not”發現” 。

範例

在給定的程式碼中，它包含一個 HTML 按鈕，其中包含「onclick()」事件處理程序，其中給出了 JavaScript 使用者定義函數「checkHash()」。當點選bb9345e55eb71822850ff156dfde57c8時，會觸發checkHash()函數。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Check the Hash in URL</title>
   <style>
      body{
         border: 1px solid black;
         text-align: center;
      }
   </style>
</head>
<body>
   <p>
      <strong> OUTPUT HASH- </strong>   
      <span id="outputVal" style="padding:3px;"> </span>// Output will be shown here 
   </p>
      
   <button onclick="checkHash()">Check URL Hash</button><br>
   <a href="#java">add hash(#) to url</a><br>
   
   <!-- JavaScript function starts from here -->
   
   <script>
      checkHash=()=>{
         var h = window.location.hash;
         if(window.location.hash){
            document.getElementById("outputVal").innerText="Hash found "+h;
            document.getElementById("outputVal").style.background="lightgreen";
         } else {
            document.getElementById("outputVal").innerText="No Hash Found";
            document.getElementById("outputVal").style.background="tomato";
         }
      }
   </script>
   
   <!-- JavaScript function ends here -->
</body>
</html>

點選錨文本後 -

#在這個狀態下，網頁的URL（http://127.0.0.1:3000/index.html）不包含任何#text，如下圖網址列所示，因此window.location .hash 不會在引用的變數中儲存任何內容，因此它傳回false 並輸出「未找到哈希值。」

點擊錨文本後，HTML屬性href=“#java”的值與當前URL連接，因此window.location.hash包含連接後的哈希文本“#java”，因此返回true哈希的名稱存儲在變數「h」中，且「h」變數將在if-else 條件下進行檢查，其輸出將顯示在「outputVal」id 容器內。

結論

當點擊錨連結時，它會將我們重定向到哈希值內容。

這為用戶提供了一個互動式介面，其中包含指向散列連結內容的方向。位置物件還具有許多有利的屬性，例如 href、origin、路徑名稱等等。 Window 物件也提供了各種操作瀏覽器的方法，例如位置、歷史記錄、open()、close() 等等。

以上是如何使用 JavaScript 檢查 URL 是否包含雜湊值？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

Java JavaScript html if 对象事件 location href windows 算法 http

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：如何使用 FabricJS 設定畫布上選擇區域的邊框顏色？下一篇：如何使用 FabricJS 設定畫布上選擇區域的邊框顏色？

看更多