Comment puis-je détecter de manière fiable les clics sur le bouton Précédent du navigateur et appliquer la navigation dans la page ?

Technique multi-navigateurs pour détecter les clics sur le bouton Précédent du navigateur et appliquer la navigation dans la page

Détecter le clic sur le bouton Précédent du navigateur et appliquer l'utilisation d'un système de navigation sur la page utilisant un système de hashtag (#) peut être difficile.

Détection du bouton Précédent du navigateur

L'approche conventionnelle consistant à utiliser window.onhashchange seule n'est pas fiable, car elle se déclenche également lorsque des éléments de la page modifient le hachage. Pour résoudre ce problème, une nouvelle technique utilisant document.onmouseover, document.onmouseleave et un indicateur booléen (window.innerDocClick) est utilisée. Lorsque la souris de l'utilisateur entre dans la zone du document, window.innerDocClick est défini sur true et lorsqu'elle la quitte, elle est définie sur false. Cela permet le gestionnaire window.onhashchange suivant :

window.onhashchange = function() {
    if (window.innerDocClick) {
        window.innerDocClick = false;
    } else {
        if (window.location.hash != '#undefined') {
            goBack();
        } else {
            history.pushState("", document.title, window.location.pathname);
            location.reload();
        }
    }
}

Application du bouton de retour sur la page

Pour contrôler la navigation arrière uniquement via le bouton de retour sur la page, un tableau d'historique (window.location.lasthash) est utilisé pour stocker les hachages précédents au fur et à mesure que l'utilisateur progresse dans l'interface. Une fonction de bouton de retour sur la page (goBack) utilise ce tableau pour accéder à la page précédente.

function goBack() {
    window.location.hash = window.location.lasthash[window.location.lasthash.length-1];
    window.location.lasthash.pop();
}

Suppression de la touche Retour arrière

Pour empêcher l'utilisateur d'utiliser la touche retour arrière pour déclencher le bouton retour, l'extrait de code suivant peut être ajouté :

$(function(){
    /*
     * this swallows backspace keys on any non-input element.
     * stops backspace -> back
     */
    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();
            }
        }
    });
});

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!