Le Tutoriel de Javascript History API

window.history
Properties
Methods
history.pushState()
history.replaceState()
Événement popstate

1. window.history

Chaque Tab ou chaque Frame a son propre objet history, et chaque objet history contient une référence à un objet spécial appelé "Joint Session History". Cet objet spécial gère tous les objets de history du navigateur.

Utilisez la syntaxe window.history (ou plus simplement history) pour accéder aux historiques de Tab ou Frame courant.

Comment la liste des pages de l'historique changera si vous vous trouvez sur une page de l'historique et que vous allez sur une autre page qui n'appartient pas à l'historique.

Remarque : Aller sur une autre page qui n'appartient pas à l'historique signifie que vous n'utilisez pas les boutons BACK, FORWARD et appelez une des méthodes : history.back(), history.forward(), history.go(), history.go(). Vous pouvez aller sur une nouvelle page qui n'appartient pas à l'histoire en cliquant sur un lien avec un lien avec une URL différente de URL actuelle ou entrer une nouvelle URL et cliquer sur Enter,..

Avant de passer à une nouvelle page :

Avant de passer à une nouvelle page :

2. Properties

history.length

Renvoie le nombre d'entités gérées dans l'objet historique de Tab (ou de Frame) courant.

history.scrollRestoration

Lorsque vous appelez l'une des fonctions back(), forward(), go(), ou utilisez les boutons BACK, FORWARD pour aller à une page d'historique. Après l'affichage de la page d'historique, le navigateur tente de restaurer (restore) la position de défilement (scroll) des barres de défilement (scrollbar) pour cette page. La restauration dépend de la valeur history.scrollRestoration.

history.scrollRestoration a deux valeurs "auto" ou"manual". La valeur par défaut est "auto".

history.scrollRestoration = "auto"

Le navigateur se chargera de restaurer la position de défilement de la barre de défilement.

history.scrollRestoration = "manual"

Vous devez restaurer vous-même la position des barres de défilement. Pour ce faire, les informations de position de défilement de la barre de défilement doivent être stockées dans chaque entité Historique. Voir plus de méthode history.pushState (...).

La vidéo suivante vous montre la différence entre les valeurs "auto" et "manual" :

3. Methods

Les méthodes de history :

go([delta])
back()
forward()
pushState(data,title[,url])
replaceState(data,title[,url])

history.go([delta])

Reculez (back) ou avancez (forward) delta pas dans Historique. Si le paramètre delta = 0 ou n'est pas fourni, le navigateur rechargera (reload) la page courante. Si delta est situé en dehors des valeurs autorisées, le navigateur ne fait rien.

history.back()

Reculez (back) un pas dans Historique. Cela équivaut à appeler la méthode history.go(-1). S'il n'y a pas de page précédente (previous page) dans l'historique, le navigateur ne fait rien.

history.forward()

Avancez (forward) un pas dans Historique. Cela équivaut à appeler la méthode history.go(1). S'il n'y a pas de page suivante (next page) dans l'historique, le navigateur ne fait rien.

pushState(data,title[,url])

Créez une entité (une page) dans l'historique.

replaceState(data,title[,url])

Créez une entité (une page) dans l'historique.

4. history.pushState()

En utilisant hash, vous pouvez créer des entités dans l'historique. De cette façon, vous pouvez obtenir des entités dans l'historique lorsque le navigateur n'a pas besoin de recharger (reload) la page.

Voyons un exemple history avec hash :

https://ex1.o7planning.com/javascript/history/hash-example.html

history.pushState(dataState, title [,url])

La méthode history.pushState(..) vous permet de créer une entité dans l'historique (URL n'a probablement pas besoin d'être modifiée). Ceci est utile dans les applications d'une page simple (Single Page).

Lorsqu'un utilisateur se rend dans une entité (une page) de l'historique et que cette entité est créée en utilisant la méthode history.pushState(), il crée l'événement popstate.

Paramètres :

dataState

Un objet stocke l'état d'une entité. Il y a beaucoup de choses que vous pouvez stocker dans cet objet, comme la position de défilement des barres de défilement. Ceci vous aide à restaurer manuellement la position de la barre de défilement, ....

title

Le paramètre title est une suggestion. Les navigateurs n'utilisent généralement pas ce paramètre pour définir le titre du document document.

url

Le paramètre url n'est pas obligatoire. S'il est fourni, il doit avoir la même origine (same origin) que URL courante de la page.

Example:

https://ex1.o7planning.com/javascript/history/pushState-example.html

pushState-example.js

function showHistory()  {
   console.log(window.history);
   var log = document.getElementById("log-area");
   log.value="";
   log.value +="history.length="+ history.length +"\n";
   log.value +="history.scrollRestoration="+history.scrollRestoration+"\n";
   log.value +="history.state="+ JSON.stringify(history.state)+"\n";
}

function popstateHandler(popstateEvent)  {
    console.log(popstateEvent );
    document.title = popstateEvent.state.title;
    showHistory();
}

// popstate event handler:
window.onpopstate = popstateHandler;

var number = 0;

function call_pushState()  {
    number = number + 1;
    var title = "State "+ number;

    var dataState = {
         empId : number,
         showProfile: true,
         title: title
    };

    window.history.pushState(dataState, title);
    document.title = title;

    // Show current History:
    showHistory();
}

pushState-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>history.pushState()</title>
      <meta charset="UTF-8">
      <meta http-equiv="pragma" content="no-cache">

      <style>textarea {width:100%;margin-top:10px;}</style>

      <script src="pushState-example.js"></script>
      
   </head>
   <body onpageshow="showHistory()">

       <h2 id="my-h2">history.pushState(..)</h2>

      <button onclick="call_pushState()">
        Call history.pushState(..)
      </button>
      <br/><br/>

      <button onclick="history.back()">history.back()</button>
      <button onclick="history.forward()">history.forward()</button>
      <br/>

      <textarea rows="8" id="log-area"></textarea>

   </body>
</html>

5. history.replaceState()

history.replaceState(dataState, title [,url])

La méthode history.replaceState(..) met à jour l'état, le titre et URL de l'entité courante dans Historique.

Les paramètres :

dataState

Un objet stocke l'état d'une entité.

title

Le paramètre title est une suggestion. Les navigateurs n'utilisent généralement pas ce paramètre pour définir le titre du document.

url

Le paramètre url n'est pas obligatoire. S'il est fourni, il doit avoir la même origine (same origin) que URL courante de la page.

6. Événement popstate

L'événement popstate se produit lorsqu'un utilisateur se rend sur une page (une entité) de l'historique créée en utilisant la méthode history.pushState(...) ou history.replaceState(...).

Vous pouvez écouter l'événement popstate en ajoutant un écouteur d'événement (even listener) à l'objet window.

window.addEventListener(‘popstate’. function(popstateEvent)  {
    // Do something here!
)};

Ou utilisez la propriété (property) window.onpopstate :

window.onpopstate = function(popstateEvent). {
    // Do something here!
};

Hướng dẫn và ví dụ Javascript PopStateEvent