Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Revision 835459 of beforeunload

  • Revision slug: Web/Events/beforeunload
  • Revision title: beforeunload
  • Revision id: 835459
  • Created:
  • Creator: sstur
  • Is current revision? No
  • Comment It doesn't make any sense to use `e || window.event` within `element.addEventListener()` since all browsers that support `addEventListener` do not require `window.event` workaround.

Revision Content

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

When a 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.

General info

Specification
HTML5
Interface
Event
Bubbles
No
Cancelable
Yes
Target
defaultView
Default Action
Varies (prompts the user for confirmation to leave the page).

Properties

{{OpenEventProperties()}} {{EventTableRow("returnValue", "DOMString", "The current return value of the event (the message to show the user).", "")}} {{CloseEventProperties()}}

Example

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

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

WebKit-based 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.returnValue = confirmationMessage;     // Gecko and Trident
  return confirmationMessage;              // Gecko and WebKit
});

Notes

When this event returns a non-void value, the user is prompted to confirm the page unload. In most browsers, the return value of the event is displayed in this dialog. In Firefox 4 and later the returned string is not displayed to the user. Instead, Firefox displays the string "This page is asking you to confirm that you want to leave - data you have entered may not be saved." See {{bug("588292")}}.

Since 25 May 2011, the HTML5 specification states that calls to {{domxref("window.alert()")}}, {{domxref("window.confirm()")}}, and {{domxref("window.prompt()")}} methods may be ignored during this event. See the HTML5 specification for more details.

Note also that various mobile browsers ignore the result of the event (that is, they do not ask the user for confirmation). Firefox has a hidden preference in about:config to do the same. In essence this means the user always confirms that the document may be unloaded.

{{LoadRelatedEvents()}}

Reference

Revision Source

<p>The <code>beforeunload</code> event is fired when the window, the document and its resources are about to be unloaded.</p>

<p>When a string is assigned to the <code>returnValue</code> 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.</p>

<h2 id="General_info">General info</h2>

<dl>
 <dt style="float: left; text-align: right; width: 120px;">Specification</dt>
 <dd style="margin: 0 0 0 120px;"><a href="https://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#unloading-documents" title="https://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#unloading-documents">HTML5</a></dd>
 <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
 <dd style="margin: 0 0 0 120px;">Event</dd>
 <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
 <dd style="margin: 0 0 0 120px;">No</dd>
 <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
 <dd style="margin: 0 0 0 120px;">Yes</dd>
 <dt style="float: left; text-align: right; width: 120px;">Target</dt>
 <dd style="margin: 0 0 0 120px;">defaultView</dd>
 <dt style="float: left; text-align: right; width: 120px;">Default Action</dt>
 <dd style="margin: 0 0 0 120px;">Varies (prompts the user for confirmation to leave the page).</dd>
</dl>

<h2 id="Properties">Properties</h2>

<p>{{OpenEventProperties()}} {{EventTableRow("returnValue", "DOMString", "The current return value of the event (the message to show the user).", "")}} {{CloseEventProperties()}}</p>

<h2 id="Example">Example</h2>

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

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

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

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

  e.returnValue = confirmationMessage;     // Gecko and Trident
  return confirmationMessage;              // Gecko and WebKit
});</pre>

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

<p>When this event returns a non-void value, the user is prompted to confirm the page unload. In most browsers, the return value of the event is displayed in this dialog. In Firefox 4 and later the returned string is not displayed to the user. Instead, Firefox displays the string "This page is asking you to confirm that you want to leave - data you have entered may not be saved."&nbsp;See {{bug("588292")}}.</p>

<p>Since 25 May 2011, the HTML5 specification states that calls to {{domxref("window.alert()")}}, {{domxref("window.confirm()")}}, and {{domxref("window.prompt()")}} methods may be ignored during this event. See the <a href="https://www.w3.org/TR/html5/webappapis.html#user-prompts">HTML5 specification</a> for more details.</p>

<p>Note also that various mobile browsers ignore the result of the event (that is, they do not ask the user for confirmation). Firefox has a hidden preference in about:config to do the same. In essence this means the user always confirms that the document may be unloaded.</p>

<h2 id="Related_Events">Related Events</h2>

<p>{{LoadRelatedEvents()}}</p>

<p>Reference</p>

<ul>
 <li><a href="https://www.whatwg.org/specs/web-apps/current-work/#prompt-to-unload-a-document" title="https://www.whatwg.org/specs/web-apps/current-work/#prompt-to-unload-a-document">Unloading Documents — Prompt to unload a document</a></li>
</ul>
Revert to this revision