location
Un objet contenant des informations sur l’adresse de la page actuelle. Il permet de lire ses parties et de naviguer vers une autre adresse.
- Renvoie
- Un objet
Location. Les méthodesassign(),replace()etreload()renvoientundefined.
Exemple
#console.log(location.href)
console.log(location.origin)
console.log(location.pathname)
console.log(location.search)
console.log(location.hash)
console.log(new URLSearchParams(location.search).get('lecon'))https://codeworlds.com/cours/javascript?lecon=5#exercices https://codeworlds.com /cours/javascript ?lecon=5 #exercices 5
Le résultat correspond à une page ouverte à l’adresse https://codeworlds.com/cours/javascript?lecon=5#exercices. Les exemples de cette page s’exécutent dans un cadre sans adresse propre, où location.href vaut about:srcdoc, donc ce code ne s’exécute pas dans l’aperçu.
Définition et utilisation
#L’objet location (aussi disponible sous window.location et document.location) décrit l’adresse de la page ouverte dans l’onglet. Il a des propriétés semblables à l’objet URL : href (l’adresse complète), origin, protocol, host, hostname, pathname, search et hash. Il lui manque cependant searchParams, donc vous lirez les paramètres de requête avec new URLSearchParams(location.search).
Contrairement à l’objet URL, modifier location déclenche une navigation. Affecter location.href = "/cours" ou appeler location.assign() navigue vers la nouvelle adresse et ajoute une entrée à l’historique. location.replace() fait la même chose, mais remplace l’entrée actuelle, donc le bouton « Précédent » ne ramènera pas à la page précédente. location.reload() recharge la page.
hash fait exception. Changer seulement le fragment, par exemple location.hash = "#exercices", ne recharge pas la page : cela ne fait que défiler jusqu’à l’élément portant cet id et déclenche l’événement hashchange. Si vous voulez changer l’adresse sans navigation et sans défilement, utilisez history.pushState().
Syntaxe
#location.href
location.origin
location.pathname
location.search
location.hash
location.href = url
location.assign(url)
location.replace(url)
location.reload()Paramètres
#url
chaîne
L’adresse cible pourassign()etreplace(), absolue ou relative.
Plus d’exemples
#const params = new URLSearchParams(location.search)
const target = new URL(params.get('retour') ?? '/panel', location.origin)
if (target.origin === location.origin) {
location.assign(target)
} else {
location.assign('/panel')
}L’adresse du paramètre retour est résolue par rapport au domaine de la page. Vérifier origin protège contre le cas où quelqu’un glisserait un lien qui redirigerait, après la connexion, vers un site étranger.
window.addEventListener('hashchange', () => {
console.log('Nouvelle section :', location.hash)
})
location.hash = 'exercices'
console.log(location.hash)#exercices Nouvelle section : #exercices
L’adresse change immédiatement, et l’événement hashchange arrive un instant plus tard, c’est pourquoi son entrée est la seconde. La page ne se recharge pas, elle défile seulement jusqu’à l’élément avec id="exercices".
Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Pour lire les paramètres, utilisez
new URLSearchParams(location.search)plutôt que de découper la chaîne à la main. - Avant de rediriger vers une adresse venant d’un paramètre, vérifiez qu’elle mène bien à votre domaine. Sinon, quelqu’un pourrait glisser un lien qui enverrait l’utilisateur vers un site étranger.
- Après une déconnexion, utilisez
location.replace(). Le bouton « Précédent » ne ramènera alors plus au panneau de l’utilisateur.
Entrées associées
#- URLUn objet pour créer, lire et modifier des adresses URL. Il décompose une adresse en parties : protocole, hôte, chemin et paramètres.
- URLSearchParamsUn objet pour lire et construire les paramètres de requête d’une adresse, la partie après le caractère ?, par exemple ?cours=js&page=2.
- history.pushState()Ajoute une nouvelle entrée à l’historique du navigateur et change l’adresse dans la barre sans recharger la page.
- EventTarget.addEventListener()Enregistre une fonction appelée à chaque fois qu’un événement se produit sur un élément, par ex. un clic.
- sessionStorageStockage du navigateur pour des paires clé-valeur qui ne fonctionne que dans l’onglet actuel et disparaît à sa fermeture.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.