web-dev-qa-db-fra.com

window.onbeforeunload ne fonctionne pas

J'ai un formulaire où les champs de saisie sont enregistrés dans Change. Dans firefox (5), cela fonctionne même lorsque la fenêtre est fermée, mais pour Chrome et IE, cela ne fonctionne pas et je dois être sûr que je sauvegarde ces données même s'ils essaient de fermer la fenêtre 'avez tapé dans un champ mais aucun événement onBlur ne s'est produit (c'est-à-dire qu'ils ont tapé quelque chose dans une zone de texte, mais qu'ils ne l'ont pas été).

J'ai lu les SO articles suivants sur l'utilisation de window.onbeforeunload: article 1article 2

si j'utilise ce qui suit:

window.onbeforeunload = function() {
    return "onbeforeunload";
}

alors je reçois un popup avec "onbeforeunload" dans.

mais si j'essaye:

window.onbeforeunload = function() {
    alert("onbeforeunload");
}

alors rien ne se passe dans aucun navigateur, même firefox.

ce que je veux réaliser est:

window.onbeforeunload = function() {
    saveFormData();
}

Je serais reconnaissant si quelqu'un pouvait indiquer où je pourrais me tromper.

Merci beaucoup

javascriptjavascript-events
33
Joe

Vous devez return à partir de onbeforeunload:

window.onbeforeunload = function() {
    saveFormData();
    return null;
}

function saveFormData() {
    console.log('saved');
}

METTRE À JOUR

selon les commentaires, alert ne semble plus fonctionner sur les nouvelles versions, tout le reste va :)

FROM MDN

Depuis le 25 mai 2011, la spécification HTML5 indique que les appels aux méthodes window.showModalDialog(), window.alert(), window.confirm() et window.Prompt() peuvent être ignorés lors de cet événement.

Il est également suggéré de l'utiliser via l'interface addEventListener:

Vous pouvez et devriez gérez cet événement via window.addEventListener() et l'événement beforeunload.

Le code mis à jour ressemblera maintenant à ceci:

window.addEventListener("beforeunload", function (e) {
  saveFormData();

  (e || window.event).returnValue = null;
  return null;
});
59
epoch

Il semble y avoir beaucoup de désinformation sur la façon d'utiliser cet événement (même dans les réponses plus votées sur cette page).

L’API de l’événement onbeforeunload est fourni par le navigateur dans un but spécifique: La seule chose tu peux faire Cela vaut la peine de faire cette méthode est de renvoyer une chaîne que le navigateur invitera ensuite l'utilisateur à lui indiquer que des mesures doivent être prises avant qu'il ne quitte la page. Vous NE POUVEZ PAS les empêcher de s'éloigner d'une page ((imaginez ce que ce serait un cauchemar pour l'utilisateur final). 

Étant donné que les navigateurs utilisent une invite de confirmation pour montrer à l'utilisateur la chaîne que vous avez renvoyée par votre écouteur d'événement, vous ne pouvez rien faire d'autre dans la méthode (comme pour effectuer une demande ajax) .

Dans une application que j'ai écrite, je souhaite inviter l'utilisateur à lui faire savoir qu'il dispose de modifications non enregistrées avant de quitter la page. Le navigateur les invite avec le message et, après cela, il est hors de portée de la main, l'utilisateur peut choisir de rester ou de partir, mais vous n'avez plus le contrôle de l'application à ce stade.

Un exemple de la façon dont je l’utilise (pseudo-code):

onbeforeunload = function() {

  if(Application.hasUnsavedChanges()) {
    return 'You have unsaved changes. Please save them before leaving this page';
  }


};

Si (et seulement si) l'application contient des modifications non enregistrées, le navigateur invite l'utilisateur à ignorer mon message (et à quitter la page de toute façon) ou à ne pas quitter la page. S'ils choisissent quand même de quitter la page, tant pis, vous ne pouvez rien y faire (vous ne devriez pas pouvoir le faire).

5
Adam

vous ne pouvez pas faire alerte () dans onbeforeunload, tout le reste fonctionne

4
Alireza Rinan

Pour faire apparaître un message lorsque l'utilisateur quitte la page pour confirmer son départ, il vous suffit de:

<script>
    window.onbeforeunload = function(e) {
      return 'Are you sure you want to leave this page?  You will lose any unsaved data.';
    };
</script>

Pour appeler une fonction:

<script>
    window.onbeforeunload = function(e) {
       callSomeFunction();
       return null;
    };
</script>
1
OG Sean

La raison pour laquelle rien ne se produit lorsque vous utilisez 'alert ()' est probablement comme expliqué par MDN: "La spécification HTML indique que les méthodes appelées à window.alert (), window.confirm () et window.Prompt () peuvent être ignorées lors de cet événement. "

Mais il y a aussi une autre raison pour laquelle vous pourriez ne pas voir l'avertissement du tout, qu'il appelle alert () ou non, a également expliqué sur le même site:

"... les navigateurs ne peuvent pas afficher les invites créées dans les gestionnaires d'événements beforeunload à moins que la page ait été interagie"

C’est ce que je vois avec les versions actuelles de Chrome et FireFox. J'ouvre ma page qui a été configurée avec ce code avant le chargement du gestionnaire:

window.addEventListener
('beforeunload'
, function (evt)
  { evt.preventDefault();
    evt.returnValue = 'Hello';
    return "hello 2222"
  }
 );

Si je ne clique pas sur ma page, autrement dit "n'interagissez pas" avec elle, et cliquez sur le bouton de fermeture, la fenêtre se ferme sans avertissement. 

Mais si je clique sur la page avant d’essayer de fermer la fenêtre ou l’onglet, j’obtiens l’avertissement et peux annuler la fermeture de la fenêtre.

Ces navigateurs sont donc "intelligents" (et conviviaux) en ce sens que si vous n'avez rien fait avec la page, aucune entrée utilisateur n’aurait besoin d’être sauvegardée. Ils fermeront donc la fenêtre sans aucun avertissement. 

Considérez que sans cette fonctionnalité, tout site Web pourrait vous demander égoïstement: "Voulez-vous vraiment quitter notre site?", Alors que vous avez déjà clairement indiqué votre intention de quitter leur site. 

VOIR: https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload

0
Panu Logic