Une alternative aux location.hash : history.pushState

Le développement d’un site en ajax m’a permis de me plonger dans une des fonctionnalités qui a fait son apparition avec le HTML5. Il est enfin possible de modifier l’url affichée chez le visiteur sans recharger le contenu de la page. Concrètement, cela permet de remplacer l’utilisation de location.hash qui était jusqu’à présent le seul moyen permettant de garder la gestion de l’historique et des favoris pour un site rafraichi en Ajax.

Présentation de history.pushState

Il faut passer par l’objet history. La méthode pushState prend trois arguments :

history.pushState( data, "Titre", "/nouvelle-page.html")
  • Le premier argument data est un objet js quelconque que l’on pourra récupérer en parcourant l’historique.
  • Le deuxième argument ne sert que de description.
  • Enfin, le dernier argument (celui qui nous intéresse) est la nouvelle URL qui sera affichée dans le navigateur (bien évidemment, le nom de domaine s’il est précisé doit être le même que celui de la page d’où est exécuté le script).

De la même façon qu’avec les hash, il faut ensuite repérer l’action du navigateur :

window.onpopstate = function( event ){
//On récupère l'objet data que l'on
//a passé en argument à pushState
data = event.state;
};

Exemple d’utilisation de history.pushState

Voici un exemple où une page contient un texte qui va varier en fonction de l’url de la page :
Le code JS :

function goTo( url, data ){
history.pushState( data, 'Page', url );
loadContent( data );
}
function loadContent( data ){
document.getElementById('pseudo').innerHTML = data;
}
window.onpopstate = function( event ){
data = event.state;
loadContent( data );
}

Le code HTML :

<div>
Choisir un pseudo
<button onclick="goTo( 'page.php?pseudo=alexandre', 'alexandre' );">alexandre</button>
<button onclick="goTo( 'page.php?pseudo=comic0', 'comic0' );">comic0</button>
<button onclick="goTo( 'page.php?pseudo=chastan', 'chastan' );">chastan</button>
Votre pseudo est : <span id="pseudo"></span>.<br /></div>

Lorsque l’utilisateur clique sur un des boutons, la page passée en argument est ajoutée à l’historique du navigateur. On peut alors naviguer dans l’historique par les boutons suivant/précédent du navigateur ou en javascript à l’aide de l’objet history avec la méthode history.go(-1) par exemple.

Les avantages et les inconvénients de history.pushState

L’utilisation de cette fonctionnalité a l’avantage de préserver des url « propres » qui correspondent aux pages référencées par les moteurs de recherche. Un autre avantage non négligeable est que l’on peut passer au navigateur n’importe quel type de variable (chaine de caractère, tableau, objet, etc…) alors que les hash ne sont que des chaines de caractères. Malheureusement, history.pushState n’est pas compatible avec les anciennes versions des navigateurs. Il faut donc être très prudent dans son utilisation.

Laisser une réponse