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
É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
Étape 2- Insérez l'événement onclick dans l'étiquette du bouton et insérez-y une fonction, telle que . 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>
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!
securefx ne peut pas se connecter
navigateur wap
La différence entre les services distribués et les microservices
Quelles sont les technologies de base nécessaires au développement Java ?
tutoriel pascal
Quels sont les types de données ?
Comment résoudre le problème selon lequel Ethernet ne peut pas se connecter à Internet
Que signifie le contexte ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
