Implémentation de la détection du bouton de retour du navigateur croisé

Détection du bouton de dos Appuyez sur les événements

déterminant si l'utilisateur a appuyé sur le bouton de retour du navigateur pose un défi. Beaucoup proposent l'utilisation de la fonction Window.onhashChange, mais il répond également aux boutons de dos en page, affectant négativement l'expérience utilisateur.

Gérer la fonctionnalité de bouton de retour en page

pour les applications à une seule page en utilisant la navigation de hachage, il est crucial de contrôler le comportement des boutons arrière intégrés. Pour ce faire, utilisez un tableau (Window.Location.Lasthash) pour stocker les hachages précédents alors que l'utilisateur navigue sur l'interface.

Distinguer le bouton de retour du navigateur du bouton de retour en page

Conventionnel comme le bouton de la fenêtre. Au lieu de cela, une variable de drapeau basculée par l'onMouseover du document (lorsque la souris plane sur le document) et OnMouseleave (lorsque la souris quitte le document) a été conçue. if (window.innerdocclick) { // Le mécanisme en page a déclenché le changement de hachage } autre { if (window.location.hash! = '#Undefined') { // bouton de retour du navigateur cliqué GOBACK (); } } }

Empêcher le backspace de imiter le bouton de retour

pour empêcher le backpace de déclencher l'événement du bouton arrière, implémentez le script suivant:

window.onhashchange = function() {
    if (window.innerDocClick) {
        // In-page mechanism triggered the hash change
    } else {
        if (window.location.hash != '#undefined') {
            // Browser back button clicked
            goBack();
        }
    }
}

En résumé, en utilisant les événements de survol du document, on peut différencier efficacement les clics du bouton de retour du navigateur et l'utilisation du bouton arrière en page, permettant un contrôle précis de la fonctionnalité du bouton arrière.