Maison > interface Web > js tutoriel > Comment empêcher la navigation accidentelle hors d'une page avec des modifications non enregistrées ?

Comment empêcher la navigation accidentelle hors d'une page avec des modifications non enregistrées ?

Susan Sarandon
Libérer: 2024-12-12 14:20:10
original
919 Les gens l'ont consulté

How to Prevent Accidental Navigation Away from a Page with Unsaved Changes?

Comment afficher « Êtes-vous sûr de vouloir quitter cette page ? » Lorsque des modifications sont validées

Dans un environnement Web moderne, l'affichage d'invites de navigation personnalisées est considéré comme un problème de sécurité et les navigateurs ne prennent plus en charge cette fonctionnalité. Au lieu de cela, les navigateurs n'afficheront que des messages génériques. Pour activer ou désactiver l'invite de navigation, utilisez simplement le code suivant :

// Enable navigation prompt
window.onbeforeunload = function() {
    return true;
};

// Remove navigation prompt
window.onbeforeunload = null;
Copier après la connexion

Legacy Browser Support (Obsolète)

Pour la compatibilité avec les navigateurs plus anciens tels que comme IE6-8 et Firefox 1-3.5, vous pouvez utiliser le code suivant pour afficher une navigation personnalisée invite :

var confirmOnPageExit = function (e) {
    // Define the message to be displayed
    var message = 'Confirm your navigation away from the page';

    // Handle compatibility with older browsers
    if (e) {
        e.returnValue = message;
    }

    // Return the message
    return message;
};

// Enable the navigation prompt
window.onbeforeunload = confirmOnPageExit;

// Disable the navigation prompt
window.onbeforeunload = null;
Copier après la connexion

Pour vérifier les valeurs modifiées lors de l'utilisation d'un framework de validation tel que jQuery, vous pouvez utiliser un code similaire à celui-ci :

$('input').change(function() {
    // Check if the input value is not empty
    if( $(this).val() != "" ) {
        // Enable the navigation prompt
        window.onbeforeunload = confirmOnPageExit;
    }
});
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal