Détecter si l'utilisateur a cliqué sur le bouton "retour" - Navigateurs mobiles

Question

J'ai une exigence très étrange.

Exigence dit: sur la page Détail du produit, lorsque l'image du produit est ouvert dans la visionneuse puis en appuyant sur back bouton navigateur mobile page, voir la fiche produit doit être montré, non page précédente par exemple page produit grille

Alors , j'ai pensé à chercher comment gérer le bouton de retour dans les navigateurs croisés. Certaines solutions ont travaillé dans les navigateurs de bureau, mais aucun travaillé dans Mobile Browsers

J'ai essayé ci-dessous solution:

window.onload = function() { 
if (typeof history.pushState === "function") { 
    history.pushState("jibberish", null, null); 
    window.onpopstate = function() { 
     history.pushState('newjibberish', null, null); 
     // Handle the back (or forward) buttons here 
     // Will NOT handle refresh, use onbeforeunload for this. 
    }; 
} 
else { 
    var ignoreHashChange = true; 
    window.onhashchange = function() { 
     if (!ignoreHashChange) { 
      ignoreHashChange = true; 
      window.location.hash = Math.random(); 
      // Detect and redirect change here 
      // Works in older FF and IE9 
      // * it does mess with your hash symbol (anchor?) pound sign 
      // delimiter on the end of the URL 
     } 
     else { 
      ignoreHashChange = false; 
     } 
    }; 
    } 
}; 

a également essayé ceci:

if (window.history && window.history.pushState) { 

$(window).on('popstate', function() { 
    var hashLocation = location.hash; 
    var hashSplit = hashLocation.split("#!/"); 
    var hashName = hashSplit[1]; 

    if (hashName !== '') { 
    var hash = window.location.hash; 
    if (hash === '') { 
     alert('Back button was pressed.'); 
    } 
    } 
}); 

Essayé cela aussi bien

window.onbeforeunload = function (e) { 
     var e = e || window.event; 
     var msg = "" 
     $("#blueimp-gallery").hide(); 
     // For IE and Firefox 
     if (e) { 
      e.returnValue = msg; 
     } 

     // For Safari/chrome 
     return msg; 
    }; 

Answer 1

Comme vous l'avez sans doute appris, onbeforeunload fournit un moyen d'annuler simplement l'événement de navigation (voir this answer pour un bon endroit pour commencer), mais il ne fonctionne pas toujours comme vous le souhaitez dans tous les navigateurs (beaucoup affichent juste un popup de confirmation, peu importe ce que vous faites, pour la sécurité les raisons). Donnez un coup de feu en premier si vous ne l'avez pas déjà fait; Je ne vois aucune tentative d'annulation dans votre exemple de code actuel, juste manipulation de l'historique. A défaut, l'utilisation du routage par hachage peut aider - de préférence via une bibliothèque qui gère le hachage d'URL comme routes d'affichage uniques (cuites en Angular, React, etc.) et en poussant les changements au history pour vous. Donner à l'état modal une URL unique (ce qui ne serait normalement pas le cas dans mon expérience) signifie que le fait de revenir en arrière fermerait simplement le modal au lieu de recharger la page.