L'objet history
L'objet history ne vas pas vous permettre de raconter des histoires, mais bien d'utiliser au mieux les possibilités de l'historique du navigateur de votre visiteur.

Qu'est-ce que l'historique du navigateur

Lorsque vous visitez un site, votre navigateur stocke l'URL en mémoire pendant un certain temps (une dizaine de jours) pour vous faciliter l'accès à ces pages.
L'objet history est donc un objet tout à fait banal, comme l'objet window. Voici la liste de ses propriétés:
PropriétéExplication
homeAller à la page d'accueil du visiteur
lengthRenvoie le nombre d'URL contenue dans l'historique
backRecule d'une page
forwardAvance d'une page
goVa à un endroit précis de l'historique

Comme exemple de l'objet history, nous allons créer un petit "explorateur d'historique".
Voici ce qu'il devra faire: Bref, faire tout ce qu'il est possible de faire avec l'objet history.

Commenceons tout de suite:

document.write('Il y a ' + history.length);
if(history.length > 1){
        document.write(' pages');
}
else{
        document.write('page');
}
document.write(' dans votre historique');

Ce petit code se contente d'afficher le nombre de pages contenues dans l'historique et ce, grâce à l'objet history. Une condition à été rajoutée pour ne pas faire de fautes d'orthographe au cas où l'historique ne contiendrait qu'une page.
Il faut maintenant afficher trois liens, un vers la page d'accueil, un vers la page suivant et un vers la page précédente.
C'est parti:

document.write('<a href="#" onClick="javascript:history.home();">Aller à la page d'accueil</a><br />');
document.write('<a href="#" onClick="javascript:history.back();">Page précécente</a><br />');
document.write('<a href="#" onClick="javascript:history.forward();">Page suivante</a><br />'):

Maintenant que cela est fait, il ne reste plus qu'à afficher un champ de saisie où l'utilisateur pourra indiquer de combien de pages il souhaite avancer/reculer et ce, grâce à la fonction "go(page)".
Cette fonction prend un attribut: de combien de pages il souhaite avancer/reculer.

Mais comment la fonction sait-elle si on souhaite avancer ou reculer de X pages?

En fait, elle ne fait qu'avancer. Par exemple, vous lui envoyez "5", elle va vous avancer de 5 pages dans l'historique (si c'est possible). Et si vous envoyer "-5", vous allez avancer de "-5" page; donc reculer.

Et si on envoie 0, qu'est-ce qui se passe?

C'est la page actuelle qui est rechargée.

Il faut maintenant créer une petite fonction qui va gérer le nombre envoyé par l'utilisateur.

function historique(){
var page = document.formulaire.input[0].value;
//Récupération du nombre entré
if(isNaN(page)){
alert('Vous devez entrer un nombre réel');
}
else{
history.go(page);
}
}

Si le contenu du champ de texte n'est pas un nombre, on affiche un alerte, sinon tout va bien.
Il ne reste plus qu'à afficher le petit formulaire:

<form name="formulaire">
<input type="text" /><br />
<input type="button" value="GO!" onClick="javascript:historique();" />
</form>


Voici à qui ressemble votre navigateur d'historique (sans style):
résultat

Et bien voilà, vous connaissez maintenant toutes les propriétés de l'objet historique.

     

Creative Commons License
Sauf mention contraire, le contenu de cette page est sous licence Creative Commons
Page générée en 0.3973 secondes.
Retour en haut de la page
Imprimer cette page