---
title: beforeunload
slug: Web/API/Window/beforeunload_event
translation_of: Web/API/Window/beforeunload_event
original_slug: Web/Events/beforeunload
---
<p>L'événement <strong><code>beforeunload</code></strong> est déclenché quand la fênetre, ou le document, et leurs resources sont sur le point d'être déchargés.</p>

<p>Lorsqu'une chaîne de caractères est assignée à la propriété <code>returnValue</code> de {{domxref("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.</p>

<div class="note">
<p><strong>Note :</strong> Afin d'éviter les "pop-ups" indésirables, les navigateurs peuvent ne pas afficher les alertes créées dans les gestionnaires <code>beforeunload</code>.</p>
</div>

<div class="warning">
<p> Attacher un gestionnaire d'événement <code>beforeunload</code> à <code>window</code> ou à <code>document</code> empêche les navigateurs d'utiliser leur mémoire cache ; consulter <a href="https://developer.mozilla.org/fr/docs/Utilisation_du_cache_de_Firefox_1.5">Utilisation du cache de Firefox 1.5</a> ou <a href="https://webkit.org/blog/516/webkit-page-cache-ii-the-unload-event/">WebKit's Page Cache</a> (en anglais).</p>
</div>

<table class="properties">
 <tbody>
  <tr>
   <td>Propagation</td>
   <td>Non</td>
  </tr>
  <tr>
   <td>Annulable</td>
   <td>Oui</td>
  </tr>
  <tr>
   <td>Object cible</td>
   <td>defaultView</td>
  </tr>
  <tr>
   <td>Interface</td>
   <td>{{domxref("Event")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Propriétés">Propriétés</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Propriété</th>
   <th scope="col">Type</th>
   <th scope="col">Description</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>target</code> {{readOnlyInline}}</td>
   <td>{{domxref("EventTarget")}}</td>
   <td>La cible de l'événement (la plus haute cible dans l'arbre du DOM).</td>
  </tr>
  <tr>
   <td><code>type</code> {{readOnlyInline}}</td>
   <td>{{domxref("DOMString")}}</td>
   <td>Le type de l'événement.</td>
  </tr>
  <tr>
   <td><code>bubbles</code> {{readOnlyInline}}</td>
   <td>{{jsxref("Boolean")}}</td>
   <td>Est-ce que l'événement se propage ?</td>
  </tr>
  <tr>
   <td><code>cancelable</code> {{readOnlyInline}}</td>
   <td>{{jsxref("Boolean")}}</td>
   <td>Est-il possible d'annuler l'événement ?</td>
  </tr>
  <tr>
   <td><code>returnValue</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>La valeur de retour de l'événement (le message à afficher à l'utlisateur)</td>
  </tr>
 </tbody>
</table>

<h2 id="Exemples">Exemples</h2>

<pre class="brush:js;">window.addEventListener("beforeunload", function (event) {
  event.returnValue = "\o/";
});

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

<p>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:</p>

<pre class="brush: js">window.addEventListener("beforeunload", function (e) {
  var confirmationMessage = "\o/";

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

<h2 id="Notes">Notes</h2>

<p>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("588292")}}.</p>

<p>Depuis le 25 Mai 2011, la spécification HTML5 indique ques les appels aux méthodes {{domxref("window.alert()")}}, {{domxref("window.confirm()")}} et {{domxref("window.prompt()")}} peuvent être ignorés durant l'événement. Voir <a href="http://www.w3.org/TR/html5/webappapis.html#user-prompts">specification HTML5 </a> pour plus de détails.</p>

<p>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 <a>about:config</a> pour faire de même. <span id="result_box" lang="fr"><span>Essentiellement, cela signifie que l'utilisateur confirme toujours silencieusement</span></span><span lang="fr"><span> que le document peut être déchargé.</span></span></p>

<h2 id="Spécifications">Spécifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">Statut</th>
   <th scope="col">Commentaire</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("HTML WHATWG", "indices.html#event-beforeunload", "beforeunload")}}</td>
   <td>{{Spec2("HTML WHATWG")}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName("HTML5 W3C", "browsers.html#unloading-documents", "beforeunload")}}</td>
   <td>{{Spec2("HTML5 W3C")}}</td>
   <td>Première définition</td>
  </tr>
 </tbody>
</table>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li>{{Event("DOMContentLoaded")}}</li>
 <li>{{Event("readystatechange")}}</li>
 <li>{{Event("load")}}</li>
 <li>{{Event("unload")}}</li>
 <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#prompt-to-unload-a-document" title="http://www.whatwg.org/specs/web-apps/current-work/#prompt-to-unload-a-document">Unloading Documents — Prompt to unload a document</a></li>
 <li><a href="https://developers.google.com/web/updates/2016/04/chrome-51-deprecations?hl=en#remove_custom_messages_in_onbeforeload_dialogs">Enlever les messages personnalisés dans les boîtes de dialogues onbeforeload après Chrome 51</a></li>
</ul>