如何使用 JavaScript 檢查 URL 是否包含哈希值？-魔扣目錄

概述

使用 JavaScript 檢查統(tǒng)一資源定位器 (U.R.L.) 是否包含哈希值 (#text)，因為 JavaScript 包含一些預(yù)構(gòu)建方法，這使得獲得特定目標(biāo)成為一項簡單的任務(wù)。這可以通過使用 JavaScript 中的 hash 屬性來完成，該屬性可以通過初始化 window.location 對象來訪問。它簡化了用戶界面并提供了最重要的網(wǎng)頁導(dǎo)航。

要構(gòu)建此解決方案，我們需要以下主題的先驗知識 –

HTML- 構(gòu)建頁面的骨架。其中我們將使用內(nèi)部標(biāo)記。

HTML 事件（onclick()、onchange() 等）

JavaScript 窗口對象、位置對象、哈希屬性。

語法

該程序使用的基本語法是 –

window.location.hash

登錄后復(fù)制

Window – 這是指定 Web 瀏覽器框架的 JavaScript 對象。它可以處理與您的瀏覽器相關(guān)的方法。 windows的屬性可以通過

來訪問

語法：

(window.property/methodName)

登錄后復(fù)制

Location – 它是窗口對象的一個??屬性，包含有關(guān)當(dāng)前網(wǎng)頁 URL 的信息。

語法：

window.location.propertyName

登錄后復(fù)制

Hash – 它是包含 # 之后文本的位置對象的屬性。如果 URL 包含“/tutorialspoint/#java”。然后location.hash將返回值“java”。

算法

第 1 步– 使用 <button> 標(biāo)記

創(chuàng)建 HTML 按鈕

第 2 步– 在按鈕標(biāo)簽 <button onclick=“”> 中插入 onclick 事件，并在其中插入函數(shù)，如<button onclick=“checkHash()”>。函數(shù)名稱是用戶定義的，因此您可以根據(jù)自己的方便進行更改。

第 3 步– 創(chuàng)建 JavaScript 箭頭函數(shù) checkHash()。

第 4 步– 使用window對象方法location和位置方法hash。將 window.location.hash 的結(jié)果存儲在變量中。

第 5 步– 在 if-else 中傳遞變量作為條件。

第 6 步– 如果 if-else 中傳遞的變量為 true，則返回“Hash found”，否則如果傳遞的變量為 false，則返回“Hash not”發(fā)現(xiàn)”。

示例

在給定的代碼中，它包含一個 HTML 按鈕，其中包含“onclick()”事件處理程序，其中給出了 JavaScript 用戶定義函數(shù)“checkHash()”。當(dāng)點擊<button>時，會觸發(fā)checkHash()函數(shù)。

<!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>

登錄后復(fù)制

點擊錨文本后 –

在這種狀態(tài)下，網(wǎng)頁的URL（http://127.0.0.1:3000/index.html）不包含任何#text，如下圖地址欄所示，因此window.location .hash 不會在引用的變量中存儲任何內(nèi)容，因此它返回 false 并輸出“未找到哈希值。”

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