Maison > Article > interface Web > Comment vérifier si une URL contient un hachage en utilisant JavaScript ?
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.
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".
É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".
<!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".
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!