Vous êtes ici: Support du web > Scripts et tutoriaux > Javascript > Aller à la page précédente et suivante en javascript objet history

Aller à la page précédente et suivante en javascript objet history
ybouane Aller à la page précédente et suivante en javascript objet history Note : 4.5/5 (1 vote) Derniéres modifications : 16/06/2010 à 21:52:02 Mots-Clés : historique objet history back next suivant précédent navigateur page javascript js Bonjour, Il vous est sûrement déjà arrivé de vouloir faire un bouton pour reculer ou avancer dans l'historique: il existe un objet en javascript qui permet de gérer ça: history. history ne gère pas votre historique mais plutôt l'historique de la session ou de la fenêtre Voici les différentes propriétés et méthodes de cet objet: back forward go length back La methode back sert tout simplement à revenir en arrière, c'est l'équivalent du bouton Précédent dans votre navigateur exemple: Code: (X)html <a href="#null" onclick="javascript:history.back();">Précédent</a> forward La methode forward fait le contraire de la methode back, elle vous redirige vers la page suivante si elle existe bien sur, si ce n'est pas le cas, rien ne se produit. C'est l'équivalent du bouton Suivant dans votre navigateur exemple: Code: (X)html <a href="#null" onclick="javascript:history.forward();">Suivant</a> go La methode go est la plus complexe même si elle reste simple. elle permet de revenir en arrière ou d'avancer mais avec la possibilité de sauter des pages. exemple: Voici le contenu de l'historique: http://www.google.com/ http://mail.google.com/ http://www.supportduweb.com/ (page actuellement visitée) http://www.w3.org http://www.youtube.com go(0); vous enverra vers http://www.supportduweb.com/ puisque c'est la page ou vous étiez. go(-2); vous enverra vers http://www.google.com/ car vous reculez de deux pages. go(1); vous enverra vers http://www.w3.org car vous avancez d'une page. length La propriété length permet de récupérer de nombre de pages dans l'historique. Exemple : Code: JavaScript document.write("Votre historique contient:"+history.length+" page(s)"); Certains navigateur limites l'historique par défaut, firefox par exemple le limite à 50 donc, si vous visitez plus de 50 pages vous ne pourrez aller au maximum qu'au 50 pages qui suives ou précèdes. C'est tout merci Scripts et tutoriaux similaires à celui ci: Recharger/Actualiser une page en javascript Ouvrir une nouvelle fenêtre (Pop-up) en javascript - window.open tutoriel Ouvrir une nouvelle fenêtre (Pop-up) et la centrer en javascript Système d'onglets en Javascript, (X)html et CSS dans la même page Image qui suit la souris en Javascript Empêcher le clic droit en Javascript (anticlicdroit) Changer l'opacité d'un div(alpha) compatibles avec tous les navigateurs Calculatrice en javascript avec bouttons Commentaires Ajouter un commentaire Pseudo: Message: Code anti-bot: (recharger) Vous n'êtes actuellement pas connecté, certaines de vos informations(tel que votre Adresse IP) seront enregistrées pour éviter du spam. Votre message ne doit pas contenir certains mots ou une adresse internet, sinon, il ne sera pas envoyé. Les commentaires Envoyé par Fée le 03/04/2009 à 01:22:02 merci beaucoup ! Envoyé par twinpath le 12/06/2010 à 22:22:46 la fonction History pose problème si vous avez en bas de page un lien "Haut". Supposons que vous cliquiez pour remonter (hop, c'est enregistré dans History), maintenant si vous cliquez pour revenir à la page précédente, vous vous retrouvez en bas de page ;) Une solution (testée) est la bienvenue. j'ai essayé avec <?php $pageFrom = $_SERVER['HTTP_REFERER']; echo $pageFrom ; ?> et un bouton de retour <input type="button" onClick="javascript:window.location.href='<?php echo $pageFrom ;?>' " /> Ca marche sur Firefox impec (et qq.autres) , mais pas IE. Envoyé par twinpath le 12/06/2010 à 23:17:59 Voici la solution :) Le bouton "Back" (rien ne change) : <input type="button" onClick="javascript: window.history.back() ; " /> Le bouton "Haut" (pointe vers une ancre nommée "a-haut" en début de page) : <input type="button" onClick="window.location.href('#a-haut') ; " /> Est remplacé par : <input type="button" onClick="window.location.replace('#a-haut') ; " /> La différence, c'est que le retour en haut n'est pas enregistré dans history. Source : fr.selfhtml.org/javascript/objets/location.htm#replace Envoyé par twinpath le 12/06/2010 à 23:34:49 Petit correctif, j'ai parlé trop vite. Comme à l'accoutumée, ça ne marche pas dans IE. Envoyé par ybouane le 16/06/2010 à 21:54:34 Bonjour, @twinpath: Essaye ça même si ton code devait fonctionner: <input type="button" onClick="javascript:window.location.replace('<?php echo $_SERVER['HTTP_REFERER'];?>');" /> Cordialement :) Envoyé par yndinga le 19/05/2011 à 09:22:30 je suis très content de ce site web Envoyé par matt le 18/09/2011 à 02:19:49 wouai je teste la Envoyé par unxljdst le 24/01/2012 à 12:30:03 20 Envoyé par kasiroclub le 05/05/2012 à 13:28:15 C'est possible de remplacer "precedent" ou "suivant" par une image png, j'ai essayer de rentrer entre les balises >et< ce code pour afficher une flèche en png mais ça ne fonctionne pas : <a href="#null" onclick="javascript:history.forward();"><img src="Lien de la flèche en png" alt="" /></a>

Aller à la page précédente et suivante en javascript objet history

ybouane

Aller à la page précédente et suivante en javascript objet history
Note : 4.5/5 (1 vote)
Derniéres modifications : 16/06/2010 à 21:52:02
Mots-Clés : historique objet history back next suivant précédent navigateur page javascript js

Bonjour,
Il vous est sûrement déjà arrivé de vouloir faire un bouton pour reculer ou avancer dans l'historique:

il existe un objet en javascript qui permet de gérer ça: history.

history ne gère pas votre historique mais plutôt l'historique de la session ou de la fenêtre

Voici les différentes propriétés et méthodes de cet objet:

back
forward
go
length

back

La methode back sert tout simplement à revenir en arrière, c'est l'équivalent du bouton Précédent dans votre navigateur exemple:

Code: (X)html

<a href="#null" onclick="javascript:history.back();">Précédent</a>

forward

La methode forward fait le contraire de la methode back, elle vous redirige vers la page suivante si elle existe bien sur, si ce n'est pas le cas, rien ne se produit. C'est l'équivalent du bouton Suivant dans votre navigateur exemple:

Code: (X)html

<a href="#null" onclick="javascript:history.forward();">Suivant</a>

go

La methode go est la plus complexe même si elle reste simple. elle permet de revenir en arrière ou d'avancer mais avec la possibilité de sauter des pages. exemple:
Voici le contenu de l'historique:

http://www.google.com/
http://mail.google.com/
http://www.supportduweb.com/ (page actuellement visitée)
http://www.w3.org
http://www.youtube.com

go(0); vous enverra vers http://www.supportduweb.com/ puisque c'est la page ou vous étiez.
go(-2); vous enverra vers http://www.google.com/ car vous reculez de deux pages.
go(1); vous enverra vers http://www.w3.org car vous avancez d'une page.

length

La propriété length permet de récupérer de nombre de pages dans l'historique.
Exemple :

Code: JavaScript

document.write("Votre historique contient:"+history.length+" page(s)");

Certains navigateur limites l'historique par défaut, firefox par exemple le limite à 50 donc, si vous visitez plus de 50 pages vous ne pourrez aller au maximum qu'au 50 pages qui suives ou précèdes.

C'est tout
merci

Scripts et tutoriaux similaires à celui ci:

Commentaires

Ajouter un commentaire

Les commentaires

Envoyé par Fée le 03/04/2009 à 01:22:02

merci beaucoup !

Envoyé par twinpath le 12/06/2010 à 22:22:46

la fonction History pose problème si vous avez en bas de page un lien "Haut".
Supposons que vous cliquiez pour remonter (hop, c'est enregistré dans History), maintenant si vous cliquez pour revenir à la page précédente, vous vous retrouvez en bas de page ;)

Une solution (testée) est la bienvenue.
j'ai essayé avec
<?php $pageFrom = $_SERVER['HTTP_REFERER']; echo $pageFrom ; ?>
et un bouton de retour
<input type="button" onClick="javascript:window.location.href='<?php echo $pageFrom ;?>' " />
Ca marche sur Firefox impec (et qq.autres) , mais pas IE.

Envoyé par twinpath le 12/06/2010 à 23:17:59

Voici la solution :)

Le bouton "Back" (rien ne change) :
<input type="button" onClick="javascript: window.history.back() ; " />

Le bouton "Haut" (pointe vers une ancre nommée "a-haut" en début de page) :
<input type="button" onClick="window.location.href('#a-haut') ; " />
Est remplacé par :
<input type="button" onClick="window.location.replace('#a-haut') ; " />

La différence, c'est que le retour en haut n'est pas enregistré dans history.

Source : fr.selfhtml.org/javascript/objets/location.htm#replace

Envoyé par twinpath le 12/06/2010 à 23:34:49

Petit correctif, j'ai parlé trop vite.
Comme à l'accoutumée, ça ne marche pas dans IE.

Envoyé par ybouane le 16/06/2010 à 21:54:34

Bonjour,
@twinpath: Essaye ça même si ton code devait fonctionner:
<input type="button" onClick="javascript:window.location.replace('<?php echo $_SERVER['HTTP_REFERER'];?>');" />

Cordialement :)

Envoyé par yndinga le 19/05/2011 à 09:22:30

je suis très content de ce site web

Envoyé par matt le 18/09/2011 à 02:19:49

wouai je teste la

Envoyé par unxljdst le 24/01/2012 à 12:30:03

Envoyé par kasiroclub le 05/05/2012 à 13:28:15

C'est possible de remplacer "precedent" ou "suivant" par une image png, j'ai essayer de rentrer entre les balises >et< ce code pour afficher une flèche en png mais ça ne fonctionne pas : <a href="#null" onclick="javascript:history.forward();"><img src="Lien de la flèche en png" alt="" /></a>