Comment pouvons-nous détecter de manière fiable les pressions sur le bouton Précédent du navigateur et les différencier des actions du bouton Précédent sur la page ?

Implémentation de la détection du bouton Précédent du navigateur multi-navigateurs

Détection des événements de pression sur le bouton Précédent

Déterminer si l'utilisateur a appuyé sur le bouton Précédent du navigateur pose un défi . Beaucoup proposent d'utiliser la fonction window.onhashchange, mais elle répond également aux boutons de retour sur la page, ce qui affecte négativement l'expérience utilisateur.

Gestion de la fonctionnalité du bouton de retour sur la page

Pour les applications d'une seule page En utilisant la navigation par hachage, il est crucial de contrôler le comportement des boutons de retour sur la page. Pour ce faire, utilisez un tableau (window.location.lasthash) pour stocker les hachages précédents lorsque l'utilisateur navigue dans l'interface.

Distinguer le bouton Précédent du navigateur du bouton Précédent de la page

Méthodes conventionnelles telles que window.onbeforeunload et window.onmousedown se sont révélés inefficaces pour distinguer les clics sur le bouton Précédent du navigateur. Au lieu de cela, une variable d'indicateur basculée par onmouseover du document (lorsque la souris survole le document) et onmouseleave (lorsque la souris quitte le document) a été conçue.

Utilisation du mécanisme de détection

Modifier window.onhashchange pour intégrer cette logique :

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

Empêcher le retour arrière d'imiter le retour Bouton

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

$(function(){
    var rx = /INPUT|SELECT|TEXTAREA/i;

    $(document).bind("keydown keypress", function(e){
        if( e.which == 8 ){ // 8 == backspace
            if(!rx.test(e.target.tagName) || e.target.disabled || e.target.readOnly ){
                e.preventDefault();
            }
        }
    });
});

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!