Heim > Artikel > Web-Frontend > Wie kann ich mithilfe von JavaScript überprüfen, ob eine URL einen Hash enthält?

Wie kann ich mithilfe von JavaScript überprüfen, ob eine URL einen Hash enthält?

王林nach vorne: 2023-09-07 14:57:111115Durchsuche

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

Übersicht

Verwenden Sie JavaScript, um zu überprüfen, ob der Uniform Resource Locator (URL) einen Hash-Wert (#text) enthält, da JavaScript einige vorgefertigte Methoden enthält, die das Abrufen eines bestimmten Ziels zu einer einfachen Aufgabe machen. Dies kann durch die Verwendung der Hash-Eigenschaft in JavaScript erfolgen, auf die durch Initialisierung des window.location-Objekts zugegriffen werden kann. Es vereinfacht die Benutzeroberfläche und bietet die wichtige Webnavigation.

Um diese Lösung zu erstellen, benötigen wir Vorkenntnisse zu den folgenden Themen -

HTML – Erstellen Sie das Grundgerüst Ihrer Seite. Dabei verwenden wir das interne 7239f9c7b7d151b366b41e07a1e7636c
HTML-Ereignisse (onclick(), onchange() usw.)
JavaScript-Fensterobjekt, Positionsobjekt, Hash-Attribut.

Grammatik

Die von diesem Programm verwendete Grundsyntax ist -

window.location.hash

Window – Dies ist ein JavaScript-Objekt, das den Webbrowser-Frame angibt. Es verarbeitet für Ihren Browser spezifische Methoden. Auf Windows-Eigenschaften kann über

Syntax:

(window.property/methodName)

Location – Es handelt sich um eine Eigenschaft des Fensterobjekts, die Informationen über die aktuelle Webseiten-URL enthält.

Syntax:

window.location.propertyName

Hash – Es ist eine Eigenschaft des Standortobjekts, das den Text nach # enthält. Wenn die URL „/tutorialspoint/#java“ enthält. Dann gibt location.hash den Wert „java“ zurück.

Algorithmus

Schritt 1 – Erstellen Sie eine HTML-Schaltfläche mit dem bb9345e55eb71822850ff156dfde57c8
-Tag
Schritt 2 – Fügen Sie das onclick-Ereignis in die Schaltflächenbezeichnung 3b0c972ff6cb77ed3535e06ec1321ba5 ein und fügen Sie darin eine Funktion ein, z. B. 4626f3e1ab2a856a463d5a673373b42e . Funktionsnamen sind benutzerdefiniert, sodass Sie sie nach Bedarf ändern können.
Schritt 3 – Erstellen Sie eine JavaScript-Pfeilfunktion checkHash().
Schritt 4 – Verwenden Sie die window-Objektmethode location und die Standortmethode hash. Speichern Sie das Ergebnis von window.location.hash in einer Variablen.
Schritt 5 – Übergeben Sie Variablen als Bedingungen in if-else.
Schritt 6- Wenn die in if-else übergebene Variable wahr ist, geben Sie „Hash gefunden“ zurück, andernfalls geben Sie „Hash nicht gefunden“ zurück, wenn die übergebene Variable falsch ist

Im angegebenen Code enthält er eine HTML-Schaltfläche, die den Ereignishandler „onclick()“ enthält, der die benutzerdefinierte JavaScript-Funktion „checkHash()“ bereitstellt. Wenn auf die Schaltfläche > geklickt wird, wird die Funktion checkHash() ausgelöst.

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

Nach dem Klicken auf den Ankertext -

In diesem Zustand enthält die URL der Webseite (http://127.0.0.1:3000/index.html) keinen #Text, wie in der Adressleiste unten angezeigt, daher ist window.location .hash nicht vorhanden in der referenzierten Variablen, um etwas darin zu speichern, daher wird false zurückgegeben und „Hash nicht gefunden“ ausgegeben

Nachdem Sie auf den Ankertext geklickt haben, wird der Wert des HTML-Attributs href="#java" mit der aktuellen URL verkettet, sodass window.location.hash den verketteten Hash-Text „#java“ enthält und true den Namen des zurückgibt Der Hash wird in der Variablen „h“ gespeichert und die Variable „h“ wird in der if-else-Bedingung überprüft und ihre Ausgabe wird im ID-Container „outputVal“ angezeigt.

Fazit

Wenn auf den Ankerlink geklickt wird, werden wir zum Hash-Inhalt weitergeleitet.

Dies bietet Benutzern eine interaktive Oberfläche mit Wegbeschreibungen zu den gehashten verknüpften Inhalten. Standortobjekte haben auch viele nützliche Eigenschaften, wie z. B. href, Ursprung, Pfadname und mehr. Das Window-Objekt stellt außerdem verschiedene Methoden zum Bedienen des Browsers bereit, z. B. Standort, Verlauf, open(), close() usw.

Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe von JavaScript überprüfen, ob eine URL einen Hash enthält?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie stelle ich mit FabricJS die Rahmenfarbe eines Auswahlbereichs auf der Leinwand ein?Nächster Artikel：Wie stelle ich mit FabricJS die Rahmenfarbe eines Auswahlbereichs auf der Leinwand ein?

In Verbindung stehende Artikel

Mehr sehen