Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1435 connectés 

  FORUM HardWare.fr
  Programmation
  Javascript/Node.js

  Retour en arrière

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Retour en arrière

n°2335159
dazai66
Posté le 14-06-2019 à 08:58:39  profilanswer
 

Bonjour,
 
J'ai une page en infinie scroll pour de la vente de produit, plus on descend dans la page plus un paramètre dans l'url p=1, p=2 ... grandit.
Le problème étant que quand j'appuie sur le bouton de retour, je retourne au p= chiffre actuel -1, et donc je reste sur la même page.
 
J'ai souhaité corrigé ce problème en Javascript avec ce code :
 

Code :
  1. <script type="text/javascript">
  2.     if (window.history && history.pushState) {
  3.         addEventListener('load', function() {
  4.             history.pushState(null, null, null); // creates new history entry with same URL
  5.             addEventListener('popstate', function() {
  6.                 history.back();
  7.             });
  8.         });
  9.     }
  10. </script>


 
 
Cela fonctionne très bien, j'ai un bon retour à la page précédente. Mais cela génère des retours en arrières même quand je clique sur des boutons de filtrage du listing produits.
J'ai regardé pas mal de forum mais je trouve pas chaussure à mon pied, quelqu'un aurait-il une variante qui déclencherait le retour en arrière uniquement avec le bouton précédent du navigateur et non pas tout les types de boutons?
 
En vous remerciant,
 
 :hello:

mood
Publicité
Posté le 14-06-2019 à 08:58:39  profilanswer
 

n°2335160
MaybeEijOr​Not
but someone at least
Posté le 14-06-2019 à 09:21:41  profilanswer
 

Bonjour,
 
Je ne suis pas sûr de comprendre l'intérêt de cette partie :

Code :
  1. addEventListener('popstate', function() {
  2.                 history.back();
  3.             });


 
Qu'est-ce que ça fait si tu l'enlèves ?


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2335169
dazai66
Posté le 14-06-2019 à 10:28:37  profilanswer
 

Le history.back me ramène bien à la page précedente plutôt qu'au p= x inférieur

Message cité 1 fois
n°2335202
dazai66
Posté le 14-06-2019 à 14:53:01  profilanswer
 

dazai66 a écrit :

Le history.back me ramène bien à la page précedente plutôt qu'au p= x inférieur
 
Si je l'enlève, je n'ai plus mon back à la page précédente


n°2335204
MaybeEijOr​Not
but someone at least
Posté le 14-06-2019 à 15:03:14  profilanswer
 

Oui, j'ai saisi le truc, je cherche une solution mais ce n'est pas certain qu'on puisse.


Message édité par MaybeEijOrNot le 14-06-2019 à 20:26:04

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2335246
MaybeEijOr​Not
but someone at least
Posté le 15-06-2019 à 16:00:38  profilanswer
 

Trouvé une solution bourrine :

 
Code :
  1. <!DOCTYPE html>
  2. <html>
  3.    <head>
  4.       <meta charset="utf-8">
  5.       <title>Page d'essai</title>
  6.       <style type="text/css">
  7.       html, body {
  8.          margin: 0 0 0 0;
  9.          padding: 0 0 0 0;
  10.          height: 100%;
  11.       }
  12.       div {
  13.          height: 100%;
  14.       }
  15.       </style>
  16.       <script type="text/javascript">
  17.          function jawascript() {
  18.             window.addEventListener('popstate', function() {
  19.                if(window.history.state !== null && window.history.state.goback === true) {
  20.                   window.history.back();
  21.                } else if(window.history.state !== null && window.history.state.goback === false) {
  22.                   window.location = window.location.toString().split('#p')[0];
  23.                }
  24.             }, false);
  25.             window.addEventListener('wheel', function(e) {
  26.                let y = e.deltaY;
  27.                let url = window.location.toString().split('#p');
  28.                if(url.length < 2 && y > 0) {
  29.                   e.preventDefault();
  30.                   if(window.history.length > 1) {
  31.                      window.history.replaceState({goback: true}, '');
  32.                   } else {
  33.                      window.history.replaceState({goback: false}, '');
  34.                   }
  35.                   window.location = url[0] + '#p1';
  36.                } else {
  37.                   let anchor = url[1];
  38.                   let max = 4;
  39.                   anchor = parseInt(anchor, 10);
  40.                   if(y > 0 && anchor < max) {
  41.                      window.history.replaceState({goback: true}, '');
  42.                      anchor++;
  43.                      window.location = url[0] + '#p' + anchor;
  44.                   } else if(y < 0 && anchor > 1) {
  45.                      window.history.replaceState({goback: true}, '');
  46.                      anchor--;
  47.                      window.location = url[0] + '#p' + anchor;
  48.                   }
  49.                }
  50.             }, false);
  51.          }
  52.       </script>
  53.    </head>
  54.    <body onLoad="jawascript()">
  55.       <div>
  56.          <a href="#p1" id="p1">p1</a>
  57.       </div>
  58.       <div>
  59.          <a href="#p2" id="p2">p2</a>
  60.       </div>
  61.       <div>
  62.          <a href="#p3" id="p3">p3</a>
  63.       </div>
  64.       <div>
  65.          <a href="#p4" id="p4">p4</a>
  66.       </div>
  67.    </body>
  68. </html>
 

Si on vient sur la page "www.mondomaine.fr/mypage.html" depuis une autre page "www.google.fr" c'est que l'historique est déjà supérieur à une page, dans ce cas là, à chaque fois qu'on avance dans la navigation on va modifier l'état de l'historique actuel en ajoutant un marqueur (goback: true). Quand la personne fera "précédent", par exemple depuis "www.mondomaine.fr/mypage.html#p3", cela déclenchera l'évènement qui dira de retourner en arrière puisque le marqueur de l'historique est sur True. Ce nouveau retour en arrière déclenchera à nouveau l'évènement et comment nous serons sur "www.mondomaine.fr/mypage.html#p2", de même le marqueur sera sur True, et ainsi de suite. Le problème c'est qu'arrivé à la page "www.mondomaine.fr/mypage.html", si l'historique était vide, ça bug, du coup dans ce cas là, lors de la première visite de cette page on vérifie si l'historique est supérieur à 1 page sinon on modifie notre marqueur pour dire qu'il faudra retourner à cette même page.

 

Le tout étant de créer un marqueur à chaque nouvelle entrée dans l'historique lors de ta navigation en scroll infini, là je t'ai donné un exemple avec une navigation par ancres, normalement c'est adaptable à ta navigation mais comme je ne sais pas comment tu t'y es pris.


Message édité par MaybeEijOrNot le 15-06-2019 à 16:03:56

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2335275
dazai66
Posté le 17-06-2019 à 08:44:27  profilanswer
 

MaybeEijOrNot je suis impressionné que certaine personne comme toi cherche à aider autant, et fait des recherches sur plusieurs jours pour y parvenir, je te remercie énormément pour ton travail, j'essai cela ce matin et je te fais un retour :)  
 

n°2335280
gatsu35
Blablaté par Harko
Posté le 17-06-2019 à 10:13:56  profilanswer
 

J'aurai plutôt géré l'event scroll au lieu de wheel

Message cité 1 fois
n°2335282
dazai66
Posté le 17-06-2019 à 10:40:09  profilanswer
 

Au final ta solution n'était pas adaptable avec le code d'infinite scroll, j'ai finis par mettre un truc moche..
 
Tout mes filtres ont une même class.  
J'empêche l'history.back si mon click détécte la class qui est sur mes boutons.
 
Mais je te remercie beaucoup !
 
Bonne journée

Message cité 1 fois
n°2335284
MaybeEijOr​Not
but someone at least
Posté le 17-06-2019 à 11:09:09  profilanswer
 

gatsu35 a écrit :

J'aurai plutôt géré l'event scroll au lieu de wheel


C'était juste pour créer un exemple rapidement.
 

dazai66 a écrit :

J'empêche l'history.back si mon click détécte la class qui est sur mes boutons.


Tu fais comment ? Car l'évènement 'popstate' n'est pas annulable, ça fait parti du problème. :??:


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
mood
Publicité
Posté le 17-06-2019 à 11:09:09  profilanswer
 

n°2335288
dazai66
Posté le 17-06-2019 à 13:20:52  profilanswer
 

Code :
  1. <script type="text/javascript">
  3.     if (window.history && history.pushState) {
  5.         addEventListener('load', function() {
  6.             history.pushState(null, null, null);
  7.             addEventListener('popstate', function() {
  8.                 if( $(".checkbox" ).is(':checked') ) {
  9.                     console.log("checkbox activee" );
  10.                 } else { window.history.back(); }
  11.             }, false);
  12.         }, false);
  13.     }
  14. </script>


 
Popstate ne l'est pas, mais une fois dedans je filtre si le bouton est une checkbox de filtre, sinon history.back
 
C'est pas beau, mais franchement tant pis x)   :lol:


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  Javascript/Node.js

  Retour en arrière

 

Sujets relatifs
retour en arrière dans le codeProblème retour arrière avec STDIN
Résultats d'une recherche et retour arriere navigateurProbleme de retour arriére dans une calculette
[PHP] Rechargement lors d'un retour en arrièreRetour arrière sur un formulaire sans effacer le contenu.
[DOM/javascript] Focus sur la page mère (retour arrière)La question classique: Comment bloquer le retour arrière
retour arriereGestion des fichiers log et retour en arriere
Plus de sujets relatifs à : Retour en arrière

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.102 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR