Comment implémenter une « page de congé ? » Invite de confirmation dans les anciens navigateurs ?

Comment afficher le message « Êtes-vous sûr de vouloir quitter cette page ? » Invite avec les modifications non enregistrées dans les anciens navigateurs

Introduction

Lorsque vous effectuez des modifications de texte ou d'autres modifications sur une page Web et que vous essayez de quitter la page, les navigateurs peuvent afficher une confirmation invite demandant à l’utilisateur de confirmer sa navigation. Cette fonctionnalité est utile pour empêcher les utilisateurs de perdre accidentellement des modifications non enregistrées.

Activation de l'invite

Pour activer cette invite de confirmation de navigation dans les navigateurs existants (IE6-8, Firefox avant à la version 4), attribuez à la propriété window.onbeforeunload une référence de fonction :

window.onbeforeunload = function(e) {
  // For IE6-8 and Firefox prior to version 4
  if (e) {
    e.returnValue = "Are you sure you want to leave?";
  }

  // For Chrome, Safari, IE8+ and Opera 12+
  return "Are you sure you want to leave?";
};

Désactivation de la Invite

Pour désactiver l'invite de confirmation de navigation, supprimez la référence de fonction de window.onbeforeunload :

window.onbeforeunload = null;

Vérification des modifications non enregistrées

La confirmation de l'utilisateur est déclenchée, qu'il y ait ou non des modifications non enregistrées sur la page. Pour vérifier les modifications non enregistrées, vous pouvez utiliser votre cadre de validation préféré ou une solution personnalisée.

Par exemple, en utilisant jQuery, vous pouvez lier un événement de modification aux champs de formulaire pour définir window.onbeforeunload lorsqu'un champ contient un non -valeur vide :

$('input').change(function() {
  if($(this).val() != "") {
    window.onbeforeunload = "Are you sure you want to leave?";
  }
});

Remarque :

Dans les navigateurs modernes, affichage d'une navigation personnalisée Le message de confirmation est considéré comme un risque pour la sécurité et a été supprimé. Les navigateurs n'affichent désormais que des messages génériques. Pour activer ou désactiver l'invite de navigation dans les navigateurs modernes, définissez ou supprimez simplement window.onbeforeunload sur une référence de fonction sans valeur 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!