L’interface et l’objet History en JavaScript

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

 

Présentation de l’objet History

L’objet History va nous permettre de manipuler l’historique du navigateur des visiteurs pour la session courante et de charger par exemple la page précédente.

Lorsqu’on parle « d’historique » ici on parle de la liste des pages visitées au sein de l’onglet ou fenêtre ou de la frame dans laquelle la page actuelle est ouverte.

Nous allons utiliser la propriété history de Window pour obtenir une référence à l’ojbet History.

 

Les propriétés et méthodes de History

L’interface History implémente plusieurs propriétés et méthodes qu’on va pouvoir utiliser à partir d’un objet History.

Les propriétés et méthodes qui vont nous intéresser sont les suivantes :

  • La propriété length qui retourne la nombre d’éléments dans l’historique (en comptant la page actuelle), c’est-à-dire le nombre d’URL parcourues durant la session ;
  • La méthode go() qui nous permet de charger une page depuis l’historique de session. On va lui passer un nombre en argument qui représente la place de la page qu’on souhaite atteindre dans l’historique par rapport à la page actuelle (-1 pour la page précédente et 1 pour la page suivante par exemple) ;
  • La méthode back() qui nous permet de charger la page précédente dans l’historique de session par rapport à la page actuelle. Utiliser back() est équivalent à utiliser go(-1) ;
  • La méthode forward() qui nous permet de charger la page suivante dans l’historique de session par rapport à la page actuelle. Utiliser back() est équivalent à utiliser go(1).

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

Présentation des méthode go back et forward de l'objet History en JavaScript

Exemple d'utilisation des méthode go back et forward de l'objet History en JavaScript

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

Laisser un commentaire