Maison > Article > interface Web > Comment vérifier si une URL contient un hachage en utilisant JavaScript ?

Comment vérifier si une URL contient un hachage en utilisant JavaScript ?

王林avant: 2023-09-07 14:57:111130parcourir

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

Vue d'ensemble

Utilisez JavaScript pour vérifier si l'Uniform Resource Locator (U.R.L.) contient une valeur de hachage (#text), car JavaScript inclut des méthodes prédéfinies qui facilitent l'obtention d'une cible spécifique. Cela peut être fait en utilisant la propriété hash en JavaScript, accessible en initialisant l'objet window.location. Il simplifie l'interface utilisateur et fournit une navigation Web très importante.

Pour construire cette solution, nous avons besoin d'une connaissance préalable des sujets suivants -

HTML - Construisez le squelette de votre page. Où nous utiliserons la balise interne 7239f9c7b7d151b366b41e07a1e7636c
Événements HTML (onclick(), onchange(), etc.)
Objet fenêtre JavaScript, objet position, attribut de hachage.

Grammaire

La syntaxe de base utilisée par ce programme est -

window.location.hash

Window - Il s'agit d'un objet JavaScript qui spécifie le cadre du navigateur Web. Il gère les méthodes spécifiques à votre navigateur. Les propriétés Windows sont accessibles via

Syntaxe :

(window.property/methodName)

Location - C'est une propriété de l'objet window qui contient des informations sur l'URL de la page Web actuelle.

Syntaxe :

window.location.propertyName

Hash - C'est une propriété de l'objet location contenant le texte après #. Si l'URL contient "/tutorialspoint/#java". Ensuite, location.hash renverra la valeur "java".

Algorithme

Étape 1 - Créez un bouton HTML à l'aide de la balise bb9345e55eb71822850ff156dfde57c8
Étape 2- Insérez l'événement onclick dans l'étiquette du bouton 3b0c972ff6cb77ed3535e06ec1321ba5 et insérez-y une fonction, telle que 4626f3e1ab2a856a463d5a673373b42e . Les noms de fonctions sont définis par l'utilisateur afin que vous puissiez les modifier selon votre convenance.
Étape 3- Créez une fonction de flèche JavaScript checkHash().
Étape 4- Utilisez la méthode objet window location et la méthode de localisation hash. Stockez le résultat de window.location.hash dans une variable.
Étape 5- Passez les variables comme conditions dans if-else.
Étape 6- Si la variable passée dans if-else est vraie, retournez "Hash found", sinon si la variable passée est fausse, retournez "Hash not found".

Dans le code donné, il contient un bouton HTML qui contient le gestionnaire d'événements "onclick()" qui donne la fonction JavaScript définie par l'utilisateur "checkHash()". Lorsque vous cliquez sur aa3581cda9cb05b6f35d32c2e98cc314, la fonction checkHash() est déclenchée.

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

Après avoir cliqué sur le texte d'ancrage -

Dans cet état, l'URL de la page Web (http://127.0.0.1:3000/index.html) ne contient aucun #texte, comme indiqué dans la barre d'adresse ci-dessous, donc window.location .hash ne sera pas dans la variable référencée pour y stocker quoi que ce soit, il renvoie donc false et affiche "Hash not found

Après avoir cliqué sur le texte d'ancrage, la valeur de l'attribut HTML href="#java" est concaténée avec l'URL actuelle, donc window.location.hash contient le texte de hachage concaténé "#java", renvoyant ainsi vrai le nom du Le hachage est stocké dans la variable "h" et la variable "h" sera vérifiée dans la condition if-else et sa sortie sera affichée dans le conteneur d'identifiant "outputVal".

Conclusion

Lorsque vous cliquez sur le lien d'ancrage, il nous redirigera vers le contenu de hachage.

Cela fournit aux utilisateurs une interface interactive avec des instructions vers le contenu lié haché. Les objets de localisation possèdent également de nombreuses propriétés utiles, telles que href, origin, pathname, etc. L'objet Window fournit également diverses méthodes pour faire fonctionner le navigateur, telles que l'emplacement, l'historique, open(), close(), etc.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

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

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment définir la couleur de la bordure d'une zone de sélection sur le canevas à l'aide de FabricJS ?Article suivant：Comment définir la couleur de la bordure d'une zone de sélection sur le canevas à l'aide de FabricJS ?

Articles Liés

Voir plus