Lors du développement Web, nous utilisons souvent l'événement de fermeture de page onbeforeunload, qui peut donner aux utilisateurs la possibilité de choisir d'abandonner la fermeture, comme cet éditeur de blog. Si l'utilisateur choisit de partir, l'événement onunload sera naturellement déclenché ; mais si l'utilisateur choisit d'annuler, comment le détecter ?
Nous supposons qu'une page laisse un événement d'annulation appelé onunloadcancel. Évidemment, cet événement doit se déclencher une fois que l'utilisateur a appuyé sur le bouton Annuler de la boîte de dialogue. Mais le processus de déclenchement pour fermer la boîte de dialogue d’invite n’est pas si simple. Passons d’abord en revue le processus :
Copiez le code comme suit :
window.onbeforeunload = fonction()
{
return "Vraiment partir ?";
}
Lorsque l'utilisateur est prêt à quitter la page (par exemple en appuyant sur le bouton de fermeture, ou en actualisant la page, etc.), l'événement onbeforeunload est déclenché. Notre script ne peut pas décider s'il doit empêcher la fermeture de la page dans cet événement. La seule chose qu'il peut faire est de renvoyer une chaîne. Cette chaîne apparaît uniquement sous forme de texte explicatif dans la boîte de dialogue de sélection de fermeture. L'utilisateur peut choisir de fermer ou de ne pas fermer. . Mais lequel choisir, nous n’avons aucun moyen de le savoir.
Cependant, si l’on analyse attentivement cette question, ce n’est en réalité pas le cas. Si l'utilisateur choisit réellement de fermer la page, alors tout le code en cours d'exécution disparaîtra ; et si l'utilisateur continue de rester sur la page, il sera traité comme si de rien n'était, à l'exception de l'événement onbeforeunload. Par conséquent, nous faisons une petite astuce dans l'événement onbeforeunload et enregistrons ici un minuteur qui démarrera après quelques millisecondes, alors bien sûr le minuteur sera invalide, alors la page est toujours là, et le délai ; de quelques millisecondes. Il n'y a aucune erreur dans cet événement d'interaction d'interface intrinsèquement asynchrone.
Copiez le code comme suit :
<langage de script="JavaScript">
window.onbeforeunload = fonction()
{
setTimeout(onunloadcancel, 10);
return "Vraiment partir ?";
}
window.onunloadcancel = fonction()
{
alert("annuler le départ");
}
</script>
Nous utilisons setTimeout et retardons 10 ms pour exécuter onunloadcancel. Si la page est vraiment fermée, les timers seront bien sûr détruits ; sinon, continuez. Mais lors des tests, il a été découvert que FireFox présentait deux bugs :
Parfois, lorsque vous appuyez sur le bouton de fermeture, onunloadcancel sera également exécuté et une boîte de dialogue clignotera. Si vous passez à while(1); le navigateur restera bloqué, ce qui signifie que onunloadcancel est bien exécuté, mais détruit uniquement l'interface, mais ne met pas en pause l'exécution du script.
Si vous quittez en actualisant la page, onbeforeunload ne sera exécuté qu'une seule fois, mais si vous cliquez sur le bouton X pour fermer la page, onbeforeunload sera exécuté deux fois. Par conséquent, nous devons encore l’améliorer pour être compatible avec FF.
Copiez le code comme suit :
<langage de script="JavaScript">
var_t;
window.onbeforeunload = fonction()
{
setTimeout(function(){_t = setTimeout(onunloadcancel, 0)}, 0);
return "Vraiment partir ?";
}
window.onunloadcancel = fonction()
{
clearTimeout(_t);
alert("annuler le départ");
}
</script>
Une méthode est utilisée ici dont je ne peux pas expliquer la raison. Elle doit être considérée comme un hack pour résoudre le bug dans FF.