L’interface et l’objet Location en JavaScript

Dans cette nouvelle leçon, nous allons étudier l’interface Location à travers l’objet JavaScript Location et voir les propriétés et méthodes intéressantes de cet objet.

 

Présentation de l’objet Location

L’interface Location va nous fournir des informations relatives à l’URL (c’est-à-dire la localisation) d’une page.

On peut accéder à Location à partir des interfaces Window ou Document, en utilisant leur propriété location respective c’est-à-dire Window.location et Document.location.

 

Les propriétés et méthode de l’objet Location

L’objet Location va nous donner accès à une dizaine de propriétés ainsi qu’à 4 méthodes.

Parmi les propriétés de Location, on peut notamment noter :

  • hash, qui retourne la partie ancre d’une URL si l’URL en possède une ;
  • search, qui retourne la partie recherche de l’URL si l’URL en possède une ;
  • pathname, qui retourne le chemin de l’URL précédé par un / ;
  • href, qui retourne l’URL complète ;
  • hostname, qui retourne le nom de l’hôte ;
  • port, qui retourne le port de l’URL ;
  • protocole, qui retourne le protocole de l’URL ;
  • host, qui retourne le nom de l’hôte et le port relatif à l’URL ;
  • origin, qui retourne le nom de l’hôte, le port et le protocole de l’URL.

Ces propriétés sont assez peu utilisées de manière générale mais il reste bon de les connaître au cas où vous auriez besoin un jour de récupérer et de manipuler une URL ou une partie précise d’URL.

L’objet Location va également nous donner accès à 3 méthodes intéressantes :

  • La méthode assign() qui va charger une ressource à partir d’une URL passée en argument ;
  • La méthode reload() qui va recharger le document actuel ;
  • La méthode replace() qui va remplacer le document actuel par un autre disponible à l’URL fournie en argument.

La différence fondamentale entre les méthodes assign() et replace() est qu’en utilisant assign(), on peut revenir en arrière pour revenir sur notre page de départ car celle-ci a été sauvegardée dans l’historique de navigation ce qui n’est pas le cas si on choisit d’utiliser replace().

Code HTML support pour présentation des propriétés et méthodes de l'objet Location

Présentation des méthodes reload assign et replace de l'objet JavaScript Location

Exemple d'utilisation des méthodes reload assign et replace de l'objet JavaScript Location

See the Pen
Cours JavaScript 7.4.1
by Pierre (@pierregiraud)
on CodePen.

Laisser un commentaire