La solution au bouton de retour JavaScript ne fonctionne pas

Dans le développement Web quotidien, nous rencontrons souvent des situations où nous devons désactiver le bouton de retour de la page. Cela empêche les utilisateurs d'utiliser la fonction de retour du navigateur sur les pages Web, protégeant ainsi la sécurité et la stabilité des pages Web. Lors de l'utilisation de JavaScript pour implémenter cette fonction, nous pouvons rencontrer une situation dans laquelle le bouton de retour n'est pas disponible. Ensuite, nous expliquerons comment résoudre ce problème.

1. Cause du problème

La désactivation du bouton de retour du navigateur en JavaScript est généralement obtenue en exploitant l'historique du navigateur. Le bouton retour sera désactivé lors de l'exécution des deux méthodes suivantes :

history.forward()
history.back()

Cependant, dans certains cas, ces méthodes ne permettent pas de désactiver le bouton retour. Habituellement, cette situation se produit dans les deux situations suivantes :

1. La page actuelle est un formulaire soumis via la méthode HTTP POST, et le formulaire contient une grande quantité de données.
2. Dans l'environnement d'exécution de la page Web, le code est exécuté si rapidement que lorsque la méthode history.forward() ou history.back() est exécutée, le navigateur ne répond pas à ces opérations à temps.

2. Solution

Pour les deux situations ci-dessus, nous pouvons prendre les solutions suivantes.

1. Réalisez la fonction back en modifiant l'URL

Nous pouvons implémenter la fonction back en ajoutant un identifiant spécifique à l'URL de la page. Lorsque l'utilisateur clique sur le bouton Précédent, il nous suffit d'écouter l'événement popstate de l'objet window et de déterminer si l'URL contient cet identifiant pour déterminer si l'utilisateur doit revenir en arrière. Le code est le suivant :

window.addEventListener('popstate', function(event) {
    if (event.state && event.state.isBack) {
        // 执行后退操作
    }
});

var state = {
    isBack: true
};

history.pushState(state, '', '#back');

Dans le code ci-dessus, nous écoutons d'abord l'événement popstate de l'objet window Lorsque l'événement est déclenché, nous déterminons si l'objet event.state contient le champ isBack. Si c'est le cas, exécutons. l'opération de retour. Lorsque nous devons désactiver le bouton de retour, il nous suffit d'appeler la méthode history.pushState() et d'ajouter un objet d'état avec un identifiant là où il doit être désactivé.

2. Réalisez le retour en modifiant la méthode onbeforeunload de l'objet window

Nous pouvons également désactiver le bouton retour en remplaçant la méthode onbeforeunload de l'objet window. Lorsque l'utilisateur clique sur le bouton Précédent, car la méthode onbeforeunload est remplacée, le navigateur affichera une boîte de confirmation. À ce moment, l'utilisateur ne peut rester sur la page actuelle qu'en sélectionnant « Rester sur cette page » dans la boîte de confirmation. Le code est le suivant :

window.onbeforeunload = function() {
    return "是否离开当前页面？";
}

Dans le code ci-dessus, nous remplaçons la méthode onbeforeunload de l'objet window et renvoyons une boîte de confirmation. Lorsque l'utilisateur clique sur le bouton de retour, le navigateur affiche une boîte de confirmation. Étant donné que l'utilisateur ne peut rester sur la page actuelle qu'en sélectionnant « Rester sur cette page », le bouton de retour deviendra invalide.

Résumé :

Désactivez le bouton retour du navigateur, dans certains cas, vous pouvez rencontrer le problème du bouton retour non disponible. Nous pouvons résoudre ce problème en modifiant l'URL ou en remplaçant la méthode onbeforeunload. Lorsque nous devons désactiver le bouton de retour, il nous suffit d'appeler la méthode correspondante là où il doit être désactivé.

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!