Retour en arrière

Retour en arrière - Javascript/Node.js - Programmation

Marsh Posté le 14-06-2019 à 08:58:39    

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:

Reply

Marsh Posté le 14-06-2019 à 08:58:39   

Reply

Marsh Posté le 14-06-2019 à 09:21:41    

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.
Reply

Marsh Posté le 14-06-2019 à 10:28:37    

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

Message cité 1 fois
Reply

Marsh Posté le 14-06-2019 à 14:53:01    

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


Reply

Marsh Posté le 14-06-2019 à 15:03:14    

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.
Reply

Marsh Posté le 15-06-2019 à 16:00:38    

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.
Reply

Marsh Posté le 17-06-2019 à 08:44:27    

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 :)  
 

Reply

Marsh Posté le 17-06-2019 à 10:13:56    

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

Message cité 1 fois
Reply

Marsh Posté le 17-06-2019 à 10:40:09    

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
Reply

Marsh Posté le 17-06-2019 à 11:09:09    

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.
Reply

Marsh Posté le 17-06-2019 à 11:09:09   

Reply

Marsh Posté le 17-06-2019 à 13:20:52    

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:

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed