Théorie
La méthode pushState() :
La méthode pushState ajoute une entrée dans l’historique de votre navigateur.
pushState prend trois paramètres : stateObj, title et url
- stateObj : Un objet javascript qui sera associé à la nouvelle entrée dans l’historique. Il peut contenir n’importe quelle donnée qui peut être sérialisée.
- title : Un paramètre pour l’instant ignoré par firefox. Il est pour l’instant préférable de mettre une chaine vide, pour éviter tous conflits futur. Vous pouvez cependant y stocker un titre court de l’état vers lequel vous allez.
- url : Stocke l’url vers laquelle vous allez. Elle ne sera appelée que lorsque l’internaute fera appel à cette entrée. L’url peut être en relative.
L’évenement onpopstate()
Un évènement popstate est envoyé chaque fois qu’il y a un changement dans l’historique actif.
La méthode replaceState()
Cette méthode fonctionne exactement comme la méthode pushState. Simplement, au lieu de créer une nouvelle entrée dans la pile de l’historique, elle modifie l’entrée actuelle.
Pratique
Imaginons un exemple simple. Une page d’accueil, et trois pages satellite.
Nous avons donc :
- index.php
- page1.html
- page2.html
- page3.html
On veux charger le contenu des pages en ajax. On veut que lorsqu’un nouveau contenu est chargé, il soit ajouté au dessus de la pile de l’historique. On veut pouvoir consulter les différentes pages depuis n’importe quelle « referer ».
Coté javascript, on arrive à ça :
$('#principal a').click(function() {
//On met l'élément courant dans une variable, pour améliorer les performances
var $t = $(this);
//On appelle la fonction qui fera la requete en ajax, et gérera la pile de l'historique
load_content($t.attr('title'),$t.attr('href'));
//On ne suit pas le lien
return false;
});
});
function load_content(title,url,skipHistory) {
$.get(url,function (data) {
//On met à jour le itre de la page
document.title = title;
//On défini l'objet d'état
var stateObj = {
title: title,
url: url
};
//Si la variable skipHistory est à false, on lance la méthode pushstate
if (!skipHistory) {
//On vérifie que la fonction pushState est bien définie
if (typeof window.history.pushState == 'function') {
window.history.pushState(stateObj,title,url);
}
}
//On charge le contenu
$('#contenu').html(data);
});
}
//On détecte les événement sur la pile de l'historique
window.onpopstate = function(event) {
//Si event.state est définie (c'est à dire que la page précédente fait partie de l'historique courant), on charge le contenu
if (event.state) {
load_content(event.state.title, window.location.pathname, true);
} else {
//Si event.state n'est pas définie, on créer un nouvel objet d'état
var stateObj = {
title: document.title,
url: window.location.pathname
};
//On modifie l'entrée actuelle
window.history.replaceState(stateObj,document.title,window.location.pathname);
}
}
J’ai essayé de documenter au mieux le code. Vous devriez pouvoir comprendre sans trop de difficulté.
Ensuite, avec un peu de php, on peut facilement savoir si on charge la page en ajax ou non, graçe à la variable $_SERVER[’HTTP_X_REQUESTED_WITH’]
//Si on est en Ajax
}else{
//Si on n'est pas en Ajax
}
Ce qui nous permet de charger l’entête et le pied de page, uniquement quand on n’est pas en ajax.
Bien sur, cette api ne fonctionne que pour les navigateurs interprétant le html5. Donc à priori, exit IE et compagnie. Il existe cependant une solution. Un plugin JQuery a été développé dans le but de rendre cette api compatible avec tous (ou presque) les navigateurs. Vous le trouverez là : http://plugins.jquery.com/project/history-js.
Démo :
Télécharger la démo :
-
- démo html5 History
Restez un peu plus longtemps, et prenez le temps de lire aussi :
1 Message
-
Wow, un joli gros morceau d’article, là. Merci m’sieur :)
Oct
A Propos
Je suis un concepteur et développeur web à Grenoble. Je développe essentiellement avec le CMS Spip. Actuellement en contrat chez Territorial, je continue ma veille technologique, et vous fais partager ce que je trouve utile et pratique.
