beforeunload

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

L'événement beforeunload est déclenché quand la fênetre, ou le document, et leurs resources sont sur le point d'être déchargés.

Lorsqu'une chaîne de caractères est assignée à la propriété returnValue de Event, une boîte de dialogue apparaît demandant confirmation avant de quitter la page (voir exemple plus bas). Certains navigateurs affichent la valeur retournée, alors que d'autres affichent leur propre message. Si aucune valeur n'est fournie, l'événement est traité silencieusement.

Note : Afin d'éviter les "pop-ups" indésirables, les navigateurs peuvent ne pas afficher les alertes créées dans les gestionnaires beforeunload.

Attention : Attacher un gestionnaire d'événement beforeunload à window ou à document empêche les navigateurs d'utiliser leur mémoire cache ; consulter Utilisation du cache de Firefox 1.5 ou WebKit's Page Cache (en anglais).

Propagation Non
Annulable Oui
Object cible defaultView
Interface Event

Propriétés

Propriété Type Description
target Lecture seule EventTarget La cible de l'événement (la plus haute cible dans l'arbre du DOM).
type Lecture seule DOMString Le type de l'événement.
bubbles Lecture seule Boolean Est-ce que l'événement se propage ?
cancelable Lecture seule Boolean Est-il possible d'annuler l'événement ?
returnValue DOMString La valeur de retour de l'événement (le message à afficher à l'utlisateur)

Exemples

js
window.addEventListener("beforeunload", function (event) {
  event.returnValue = "\\o/";
});

// est équivalent à
window.addEventListener("beforeunload", function (event) {
  event.preventDefault();
});

Les navigateurs basés sur WebKit ne suivent pas les spécifications pour la boîte de dialogue. Un exemple pratiquement compatible entre les navigateurs serait à peu près comme suit:

js
window.addEventListener("beforeunload", function (e) {
  var confirmationMessage = "\\o/";

  e.returnValue = confirmationMessage; // Gecko, Trident, Chrome 34+
  return confirmationMessage; // Gecko, WebKit, Chrome <34
});

Notes

Quand l'événement retourne une valeur non nulle, l'utilisateur est invité à confirmer le déchargement de la page. Dans la plupart des navigateurs, la valeur de retour de l'événement est affiché dans une boîte de dialogue. Dans Firefox 4 et plus, la chaine de caractères retournée n'est pas affiché à l'utilisateur. A la place, Firefox affiche "Cette page demande de confirmer sa fermeture ; des données saisies pourraient ne pas être enregistrées". Voir bug Firefox 588292.

Depuis le 25 mai 2011, la spécification HTML5 indique que les appels aux méthodes window.alert(), window.confirm() et window.prompt() peuvent être ignorés durant l'évènement. Voir la spécification HTML5 (en anglais) pour plus de détails.

Noter aussi que de nombreux navigateurs ignorent le résultat de l'événement (il n'y a donc aucune demande de confirmation). Firefox a une préférence cachée dans about:config pour faire de même. Essentiellement, cela signifie que l'utilisateur confirme toujours silencieusement que le document peut être déchargé.

Spécifications

Specification
HTML Standard
# event-beforeunload
HTML Standard
# handler-window-onbeforeunload

Voir aussi