Message "Quittez le site web ?"

jeanluc

Bonjour ,

Sur les sites Zwii, lorsqu'on change de page un message "Quittez le site web ?" peut s'afficher. Ce n''est pas a priori un problème mais cela finit par être lassant. @lemimi a signalé ce comportement lorsqu'il testait mon module Visualiseur GPX (voir la discussion).

Quand ce comportement se produit-il ?

Lorsqu'on coche des cases de choix, remplit des champs (...) qui appartiennent la plus part du temps à des formulaires et qu'on quitte la page qui les héberge sans sauvegarder les formulaires ou sans les utiliser. D'une manière générale il se produit sur les pages qui utilisent les modules Formulaire, Recherche, le mien (Visualiseur) et peut-être d'autres.

Ce comportement est généré à cause de l'événement beforeunload , qui est géré sur Zwii par jQuery.

Je l'ai confirmé en appliquant la méthode ci-dessous :

Utilisation des Outils de Développement Chrome

1. Ouvrir les Outils de Développement : Cliquez droit sur la page et sélectionnez "Inspecter" ou utilisez Ctrl + Shift + I.
2. Accéder à l'onglet Sources : Allez dans l'onglet "Sources".
3. Trouver les écouteurs d'événements : Dans le panneau de droite, recherchez la section "Global Listeners", puis développez-la pour trouver l'événement beforeunload.
4. Supprimer les écouteurs : Cliquez sur le bouton "Remove" pour chaque écouteur d'événements que vous souhaitez supprimer.

Comme je n'ai pas Chome, j'ai utilisé Edge, la manipulation est identique.

J'utilise le site de zwiiCMS, la page Rechercher. Je saisie une donnée dans le champ. Au point 3 de la méthode je vois :

Je clique sur "Mise à jour" sans lancer la recherche : j'ai le message.

Je recommence, cette fois j'applique le point 4 : plus de message.

Bien-sûr, ce comportement n'est que ponctuel.

Il est possible de supprimer définitivement le message (mais est-ce conseillé ?) :

Sur Firefox : Dans about:config, il suffit de passer "dom.disable_beforeunload" à true.

Pour Chrome que je n'ai pas il y a une extension no-beforeunload, qui fonctionne sur Vivaldi (un autre navigateur de la galaxie Chome) mais pas sur Edge et je n'ai pas trouvé d'équivalent.

Voilà tout ce que j'avais à dire sur le sujet. Je redis qu'à priori ce n'est pas un problème mais plutôt un comportement lassant qui peut décourager des utilisateurs à visiter nos sites, surtout lorsque des cases à cocher sont disponibles sur une page pour afficher des options sans recharger celle-ci.

Je ne sais pas ce qu'en pense @fred, et si il y aurait quelque chose à faire pour amoindrir la gêne.

 Bonne journée.

Jean-Luc

fred

Bonjour,

Sujet déplacé, ce n'est pas un bug de Zwii mais un comportement lié au navigateur.

La plupart du temps, le message s'affiche quand un formulaire est quitté avec un champ modifié sans avoir été validé, il peut aussi s'afficher quand un script js génère des champs de formulaire.

Depuis la version initiale de Zwii créée par Rémi, il existe une option de template noDirty qui génère un attribut de champ data-no-dirty. Cet attribut est intercepté par core.js.php, il permet de déclencher l'affichage d'un message js 'Les modifications que vous avez apportées ne seront peut-être pas enregistrées.'

Désormais, cette fonctionnalité est prise en charge par le navigateur sans avoir besoin de cette option noDirty.

La situation décrite par @jeanluc est inverse, il souhaiterait forcer le navigateur à ne pas afficher le message quand un champ de formulaire a été modifié sans validation.

Il y a plusieurs stratégies :

• désactiver l'événement beforeunload pour une page complète
• désactiver l'événement beforeunload sur un champ

Quoi qu'il en soit, je vais d'abord devoir me pencher sur l'option noDirty de Zwii.

Bonne journée,

jeanluc

Bonjour @fred,

Oui c'est un un comportement lié au navigateur mais initialisé par jquery dans la cas que j'ai soumis.

Ce que je propose comme solution c'est de l'artillerie lourde ( bazooka contre une mouche) et qui n'ai valable que pour le(s) navigateur(s) d'un utilisateur.

J'ai donc désactivé l'événement beforeunload pour la page de mon module. Pas évident de déterminer l'endroit ou placer l'instruction de désactivation ($(window).off('beforeunload')). En final je l'ai mise dans la fonction window.onload de l'index de mon module (désolé pour ceux qui ne le connaisse pas.). C'est opérationnel pour tous les utilisateurs potentiels.

Bonne soirée.

Jean-Luc

fred

Bonjour,

C'est en effet la meilleure solution à moins de déboguer les nombreux scripts OSM et autres.

Bonne journée,

jeanluc

Bonjour,

@fred,

les nombreux scripts OSM : de quels scripts parles-tu ? Je n'utilise aucun script OSM dans mon module, comme je n'utilse pas jquery, je n'aime pas cette librairie.

Jean-Luc

fred

Bonjour,

Je ne faisais pas référence au langage ;) mais aux librairies OSM en partie utilisées.

Alternatively the properties can be set via the `set` method after a layer has been created:
 * ```javascript
 * var lyr = new ol.layer.Tile({
 *   visible: true,
 *   source: new ol.source.OSM()
 * })
 * // Specify a title property which will be displayed by the layer switcher
 * lyr.set('title', 'OpenStreetMap');

jeanluc

Bonjour,

 Comme dit précédemment je n'utilise pas de librairies/scripts OSM, même en partie. Mon module repose sur un script que j'ai écrit de la première à la dernière ligne. La librairie utilisée est openLayers en version v9.1.0, avec des librairies tierces.

Par rapport au sujet de ce message, je rappelle que ce n'est ni un bug, ni un problème mais un comportement lassant, j'ai continué d'investiguer et ai identifié ce qui semble en être la cause : du code dans le fichier core.js.php, les lignes 130 à 135, voir ci-dessous.

Code :

$(window).on("beforeunload", function () {

if (inputsDOM.serialize() !== inputSerialize) { 

message = "<?php echo helper::translate('Les modifications que vous avez apportées ne seront peut-être pas enregistrées.');?>"; 

return message;

 } 

});

le message n'a plus lieu d'être car les navigateurs ne le prennent plus en compte. Chacun a le sien.

Ce code suffit à créer le comportement (affichage du message d'alerte). Le fait de mettre en commentaire ce code supprime le comportement

Voilà la contribution complémentaire que je voulais apporter.

Bonne journée.

Jean-Luc

fred

Bonsoir @jeanluc

Merci pour cette contribution, j'avais aussi identifié cette partie du core.js écris par Rémi sans avoir eu le temps d'approfondir.

À partir du moment où le problème est clairement identifié, cet événement sera supprimé des prochaines versions de Zwii et de Campus.

Bravo pour le script 💪

Bonne fin de journée,

Fred