Lorsque l’on explore la hiérarchie des objets JavaScript, on découvre un élément essentiel : l’objet Location. Cet objet est une propriété de l’objet global window. Il appartient à la famille des objets de type Location, parmi lesquels l’objet window.location se distingue comme un exemple concret. L’objet Location offre des fonctionnalités cruciales pour interagir avec les URL des pages web.
Contexte :
Lorsque l’on programme en JavaScript et que l’on travaille avec des pages web, il est souvent nécessaire d’accéder et de manipuler les URL. L’objet Location joue un rôle central dans cette tâche. Il permet d’extraire des informations spécifiques de l’URL, telles que les paramètres passés dans l’adresse, de rediriger l’utilisateur vers d’autres pages web, ou encore de rafraîchir la page actuelle. Cette connaissance de l’objet Location est cruciale pour de nombreuses opérations de navigation et d’interaction avec le web à travers JavaScript.
L’objet Location en JavaScript est un composant essentiel pour interagir avec les URL des pages web. Il permet d’accéder à diverses informations et de réaliser des actions de navigation.
| Propriété | Utilité | Exemple |
|---|---|---|
| href | Renvoie une chaîne avec l’URL complète. | alert('URL : ' + window.location.href); |
| protocol | Renvoie le protocole URL, généralement http ou https. | alert('Protocole : ' + window.location.protocol); |
| host | Renvoie le nom du serveur, généralement sous forme de nom de domaine, et, si un port spécifié existe, séparé par :. | alert('Hôte : ' + window.location.host); |
| hostname | Renvoie le domaine ou le serveur. | alert('Nom d'hôte : ' + window.location.hostname); |
| pathname | Renvoie le chemin à l’exclusion du nom de domaine ou du serveur. | alert('Chemin : ' + window.location.pathname); |
| search | Renvoie la chaîne qui représente les paramètres qui existent dans l’URL. | alert('Paramètres : ' + window.location.search); |
| hash | Renvoie # suivi d’un texte si dans l’URL il y a un # suivi d’un texte (ancre d’emplacement du fragment html). | alert('Localisateur : ' + window.location.hash); |
| origin | Renvoie une chaîne représentant la racine du site Web | alert('Origine : ' + window.location.origin); |
| Méthode | Utilité | Exemple |
|---|---|---|
| assign(URL de destination) | Attribue une URL à la fenêtre actuelle, provoquant le chargement de l’URL de destination. L’utilisateur peut revenir en arrière avec le bouton Précédent du navigateur. | alert("Transfert vers lecoursgratuit.com"); window.location.assign('http://lecoursgratuit.com'); |
| reload(opcIfFromServer) | Provoque le rechargement de l’URL actuelle. Si true est indiqué en paramètre, le rechargement se fera depuis le serveur (rafraîchissement complet). S’il n’est pas précisé ou est faux, le rechargement peut se faire depuis le cache. | alert('Rechargement de la page... '); window.location.reload(true); |
| replace(URL de destination) | Attribue une URL à la fenêtre actuelle, provoquant le chargement de l’URL de destination. L’utilisateur ne peut pas revenir en arrière avec le bouton Précédent du navigateur. | alert('Remplacement de la page... '); window.location.replace('http://lecoursgratuit.com'); |
| toString() | Renvoie une chaîne représentative de l’URL (window.location.toString() renvoie la même chose que window.location.href) | alert('URL actuelle : ' + window.location.toString()); |
Supposons une URL construite selon ce modèle : http://lecoursgratuit.com/index.php?option=compra&moneda=euro&producto=libro1, où le paramètre d’option peut être acheter, vendre ou échanger. Le paramètre monétaire peut être le peso mexicain, l’euro, le peso argentin, le peso colombien, le bolivar, le sol, le peso chilien. Et le paramètre product peut avoir n’importe quelle valeur.
Si nous souhaitons récupérer la valeur du paramètre de devise à l’aide de JavaScript, voici un exemple de code que nous pouvons utiliser en enregistrant le fichier sous le nom example1.html :
<!DOCTYPE html>
<html>
<head>
<title>Exemple lecoursgratuit.com</title>
<meta charset="utf-8">
<script type="text/javascript">
function extractUrlParameter(parameterName) {
var urlParams = new URLSearchParams(window.location.search);
return urlParams.get(parameterName);
}
var currency = extractUrlParameter('moneda');
if (currency) {
alert('Valeur du paramètre de devise dans l\'URL : ' + currency);
} else {
alert('Le paramètre de devise n\'a pas été trouvé dans l\'URL.');
}
</script>
</head>
<body>
<h1>Exemple d'utilisation de window.location</h1>
</body>
</html>Ce code permettra d’extraire et d’afficher la valeur du paramètre de devise de l’URL du site « www.lecoursgratuit.com » dans une boîte d’alerte.
Chaque organisation est confrontée à des événements susceptibles de perturber son fonctionnement : cyberattaque, panne…
La plupart des projets de migration vers AWS commencent par une estimation des coûts mensuels.…
Le prix affiché sur un devis raconte rarement toute l'histoire. Deux chariots élévateurs peuvent sembler…
La gestion d'un immeuble ou d'une résidence repose autant sur la qualité des équipements que…
Le DOE numérique transforme la manière dont les professionnels du bâtiment préparent, organisent et transmettent…
Le DOE Architecture constitue l'une des pièces maîtresses du Dossier des Ouvrages Exécutés (DOE bâtiment).…
This website uses cookies.