Web/API/BeforeUnloadEvent

The beforeunload event is fired when the window, the document and its resources are about to be unloaded.

When a non-empty string is assigned to the returnValue Event property, a dialog box appears, asking the users for confirmation to leave the page (see example below). When no value is provided, the event is processed silently. Some implementations only show the dialog box if the frame or any embedded frame receives a user gesture or user interaction. See Browser compatibility for more information.

  <div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveAspectRatio="xMinYMin meet"><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/Event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="38.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Event</text></a><polyline points="76,25  86,20  86,30  76,25" stroke="#D4DDE4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/BeforeUnloadEvent" target="_top"><rect x="116" y="1" width="170" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text  x="201" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">BeforeUnloadEvent</text></a></svg></div>

  a:hover text { fill: #0095DD; pointer-events: all;}

Bubbles	No
Cancelable	Yes
Target objects	defaultView
Interface	Event

Examples

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

// is equivalent to
window.addEventListener("beforeunload", function( event ) {
  event.preventDefault();
});

WebKit-derived browsers don't follow the spec for the dialog box. An almost-cross-browser working example would be close to the below example.

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

  (e || window.event).returnValue = confirmationMessage;     // Gecko + IE
  return confirmationMessage;                                /* Safari, Chrome, and other
                                                              * WebKit-derived browsers */
});

Specifications

Specification	Status	Comment
HTML Living StandardThe definition of 'BeforeUnloadEvent' in that specification.	Living Standard	Initial definition

Browser compatibility

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
BeforeUnloadEvent	Chrome Full support Yes	Edge Full support 12	Firefox Full support 1.5	IE Full support Yes	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 4	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
User interaction required for dialog box	Chrome Full support 60	Edge Full support ≤79	Firefox ?	IE ?	Opera Full support 47	Safari ?	WebView Android Full support 60	Chrome Android Full support 60	Firefox Android ?	Opera Android Full support 44	Safari iOS ?	Samsung Internet Android Full support 8.0

Legend

Full support  

Full support

Compatibility unknown  

Compatibility unknown

See also

• DOMContentLoaded
• readystatechange
• load
• beforeunload
• unload
• Unloading Documents — Prompt to unload a document

BeforeUnloadEvent by Mozilla Contributors is licensed under CC-BY-SA 2.5.