Comment puis-je récupérer si l'événement popstate provient d'actions en arrière ou en avant avec le pushstate HTML5 ?

Question

Je développe une page Web où, en fonction des actions suivantes ou précédentes, je fais l'animation correspondante, le problème survient lors de l'utilisation du pushstate. Lorsque je reçois l'événement, comment savoir si l'utilisateur a cliqué sur les boutons d'historique précédent ou suivant à l'aide de l'API Pushstate ? ou dois-je implémenter quelque chose moi-même ?

Answer 1

Vous devez le mettre en œuvre vous-même, ce qui est assez facile.

• Lors de l'appel de pushState donnez à l'objet de données un identifiant d'incrémentation unique (uid).
• Lorsque le onpopstate est invoqué ; vérifier l'uid d'état par rapport à une variable persistante contenant le dernier uid d'état.
• Mettez à jour la variable persistante avec l'uid d'état actuel.
• Effectuez différentes actions selon que l'uid de l'état était supérieur ou inférieur au dernier uid de l'état.

Answer 2

Vous pouvez utiliser ce code (pour regarder le bouton retour) :

 window.addEventListener('popstate', function(event) {
    // Do here what you want to do when click (back) on browser!

    // for example here is code to catch the current hash:
    var hashLocation = location.hash;
    var hashSplit = hashLocation.split("#!/");
    var hashName = hashSplit[1];
    if(hashName != '')
    {
        alert('gotcha! the back hash name was: ('+hashName+')');
    }
});

Et il utilisera la même manière pour (bouton Forward).

Prendre plaisir!