L'API History

L'API History est la façon dont les navigateurs vous permettent d'interagir avec la barre d'adresse et l'historique de navigation

introduction

L'API History vous permetinteragir avec l'historique du navigateur,déclencher les méthodes de navigation du navigateuretmodifier le contenu de la barre d'adresse.

Il est particulièrement utile en combinaison avec les applications à page unique modernes, sur lesquelles vous ne faites jamais de demande côté serveur pour de nouvelles pages, mais à la place, la page est toujours la même: seul le contenu interne change.

UNEapplication JavaScript modernes'exécuter dans le navigateur qui n'interagit pas avec l'API History, que ce soit explicitement ou au niveau du framework, sera une mauvaise expérience pour l'utilisateur, carles boutons arrière et avant se cassent.

De plus, lors de la navigation dans l'application,la vue change mais la barre d'adresse ne change pas.

Et aussile bouton de rechargement se casse: le rechargement de la page, car il n'y a pas de lien profond, va amener le navigateur à afficher une page différente

L'API History a été introduite en HTML5 et est maintenantpris en charge par tous les navigateurs modernes. IE le prend en charge depuis la version 10, et si vous devez prendre en charge IE9 et versions antérieures, utilisez leBibliothèque History.js.

Accéder à l'API History

L'API History est disponible sur lewindowobjet, vous pouvez donc l'appeler comme ceci:window.historyouhistory, puisquewindowest l'objet global.

The History object

Commençons par la chose la plus simple que vous puissiez faire avec l'API History.

Retournez à la page précédente:

history.back()

cela va à l'entrée précédente dans l'historique de session. Vous pouvez passer à la page suivante en utilisant

history.forward()

C'est exactement comme si vous utilisiez les boutons Précédent et Suivant du navigateur.

go()vous permet de naviguer en arrière ou en avant de plusieurs niveaux en profondeur. Par exemple

history.go(-1) //equivalent to history.back()
history.go(-2) //equivalent to calling history.back() twice
history.go(1) //equivalent to history.forward()
history.go(3) //equivalent to calling history.forward() 3 times

Pour savoir combien d'entrées il y a dans l'historique, vous pouvez appeler

history.length

Ajouter une entrée à l'historique

UtilisantpushState()vous pouvez créer une nouvelle entrée d'historique par programme. Vous passez 3 paramètres.

Le premier est un objet qui peut contenir n'importe quoi (il y a cependant une limite de taille, et l'objet doit être sérialisable).

Le deuxième paramètre est actuellement inutilisé par les principaux navigateurs, vous passez donc généralement une chaîne vide.

Le troisième paramètre est une URL associée au nouvel état. Notez que l'URL doit appartenir au même domaine d'origine que l'URL actuelle.

const state = { name: 'Flavio' }
history.pushState(state, '', '/user')

L'appeler ne changera pas le contenu de la page et n'entraînera aucune action du navigateur telle que la modificationwindow.locationaurait.

Modifier les entrées d'historique

Tandis quepushState()vous permet d'ajouter un nouvel état à l'historique,replaceState()vous permet de modifier l'état actuel de l'historique.

history.pushState({}, '', '/posts')
const state = { post: 'first' }
history.pushState(state, '', '/post/first')
const state = { post: 'second' }
history.replaceState(state, '', '/post/second')

Si vous appelez maintenant

history.back()

le navigateur va directement à/posts, puisque/post/firstétaitremplacépar/post/second

Accéder à l'état actuel de l'entrée de l'historique

Accéder à la propriété

history.state

renvoie l'objet d'état actuel (le premier paramètre passé àpushStateoureplaceState).

Leonpopstateun événement

Cet événement est appeléwindowchaque fois que l'état de l'historique actif change, avec l'état actuel comme paramètre de rappel:

window.onpopstate = event => {
  console.log(event.state)
}

enregistrera le nouvel objet d'état (le premier paramètre passé àpushStateoureplaceState) chaque fois que vous appelezhistory.back(),history.forward()ouhistory.go().

Téléchargez mon gratuitManuel du débutant JavaScript


Plus de didacticiels sur le navigateur: