Maison > interface Web > js tutoriel > Comment puis-je améliorer la boîte de dialogue OnBeforeUnload pour les modifications non enregistrées ?

Comment puis-je améliorer la boîte de dialogue OnBeforeUnload pour les modifications non enregistrées ?

Barbara Streisand
Libérer: 2024-12-15 11:44:18
original
675 Les gens l'ont consulté

How Can I Improve the OnBeforeUnload Dialog for Unsaved Changes?

Personnalisation de la boîte de dialogue OnBeforeUnload : une solution complète

L'événement onbeforeunload est un outil crucial pour avertir les utilisateurs des modifications non enregistrées avant de quitter une page. Cependant, la boîte de dialogue par défaut affichée par cet événement peut être sous-optimale, ce qui nécessite une personnalisation. Malheureusement, la modification de la boîte de dialogue par défaut n'est pas réalisable.

Solution : Travailler dans les limites

Pour travailler avec la boîte de dialogue existante, attribuez une chaîne à la propriété returnValue de la fenêtre .event :

window.onbeforeunload = function() {
    return 'You have unsaved changes!';
}
Copier après la connexion

Notes supplémentaires sur jQuery

  • Évitez d'utiliser les gestionnaires d'événements de jQuery pour onbeforeunload, car ils peuvent déclencher plusieurs événements.
  • Si vous utilisez jQuery, utilisez la syntaxe de liaison générique :
$(window).bind('beforeunload', function() {} );
Copier après la connexion

Messages personnalisés dans Chrome

S'il vous plaît Notez que les messages personnalisés dans les boîtes de dialogue onbeforeunload sont obsolètes depuis la version 51 de Chrome.

Conclusion

Bien que la boîte de dialogue onbeforeunload ne puisse pas être entièrement personnalisée, ces solutions offrent des moyens efficaces d'améliorer l'expérience utilisateur et communiquer des informations importantes sur les modifications non enregistrées.

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