fenêtre.onbeforeunload ne fonctionne pas
J'ai un formulaire où les champs de saisie sont enregistrés onChange. Dans firefox (5) cela fonctionne même lorsque la fenêtre est fermée, mais pour Chrome et IE ce n'est pas le cas et je dois être sûr que je sauvegarde ces données même s'ils essaient de fermer la fenêtre après avoir tapé dans un champ mais un événement onBlur ne s'est pas produit (c'est-à-dire qu'ils ont tapé quelque chose dans une zone de texte, mais n'en ont pas retiré).
J'ai lu les articles SO suivants sur l'utilisation de la fenêtre.onbeforeunload: article 1 article 2
Si j'utilise ce qui suit:
window.onbeforeunload = function() {
return "onbeforeunload";
}
Ensuite, je reçois un popup avec "onbeforeunload".
Mais si j'essaie:
window.onbeforeunload = function() {
alert("onbeforeunload");
}
Alors rien ne se passe dans n'importe quel 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
5 réponses
Vous devez return à partir du onbeforeunload:
window.onbeforeunload = function() {
saveFormData();
return null;
}
function saveFormData() {
console.log('saved');
}
Mise à JOUR
Selon les commentaires, alert ne semble plus fonctionner sur les nouvelles versions, tout le reste va :)
À PARTIR DE MDN
Depuis le 25 mai 2011, la spécification HTML5 indique que les appels à
window.showModalDialog(),window.alert(),window.confirm(), et les méthodeswindow.prompt()peuvent être ignorées pendant cet événement.
Il est également suggéré de l'utiliser via l'interface addEventListener:
Vous peut et devraient gérer cet événement par le biais de
window.addEventListener()et lebeforeunloadévénement.
Le code mis à jour ressemblera maintenant à ceci:
window.addEventListener("beforeunload", function (e) {
saveFormData();
(e || window.event).returnValue = null;
return null;
});
Il semble y avoir beaucoup de désinformation sur la façon d'utiliser cet événement (même dans les réponses upvoted sur cette page).
L'API d'événement onbeforeunload est fournie par le navigateur dans un but spécifique: la seule chose que vous pouvez faire qui vaut la peine d'être faite dans cette méthode est de renvoyer une chaîne que le navigateur demandera ensuite à l'utilisateur de lui indiquer qu'une action doit être prise avant qu'il ne Vous ne pouvez pas les empêcher de naviguer loin d'un page (imaginez quel cauchemar ce serait pour l'utilisateur final).
Parce que les navigateurs utilisent une invite de confirmation pour montrer à l'utilisateur la chaîne que vous avez renvoyée de votre écouteur d'événement, vous ne pouvez rien faire d'autre dans la méthode non plus (comme effectuer une requête ajax).
Dans une application que j'ai écrite, je veux inviter l'utilisateur à lui faire savoir qu'il a des modifications non enregistrées avant de quitter la page. Le navigateur les invite avec le message et, après cela, il est hors de mes mains, le l'utilisateur peut choisir de rester ou de partir, mais vous n'avez plus le contrôle de l'application à ce point.
Un exemple de comment 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 a 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 de quitter la page de toute façon, dommage, il n'y a rien que vous pouvez faire (ni devrait être en mesure de le faire) à ce sujet.
Vous ne pouvez pas faire alert () dans onbeforeunload, tout le reste fonctionne
Pour afficher un message lorsque l'utilisateur quitte la page pour confirmer son départ, il suffit de faire:
<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>
Oui ce que tout le monde dit ci-dessus.
Pour votre situation immédiate, au lieu de onChange, vous pouvez utiliser onInput, nouveau en html5. L'événement d'entrée est le même, mais il se déclenchera sur chaque frappe, quel que soit le focus. Fonctionne également sur les sélections et tout le reste comme onChange.