unload

  • Revision slug: Mozilla_event_reference/unload
  • Revision title: unload
  • Revision id: 352199
  • Created:
  • Creator: oncletom
  • Is current revision? No
  • Comment Details, execution order and example.

Revision Content

The unload event is fired when the document or a child resource is being unloaded.

It is fired after:

  1. beforeunload (cancellable event)
  2. pagehide

The document is in a particular state:

  • all the resources still exist (img, iframe etc.)
  • nothing is visible anymore to the end user
  • UI interactions are ineffective (window.open, alert, confirm etc.)
  • an error won't stop the unloading workflow

Please note that the unload event also follow the document tree: parent frame unload will happen before child frame unload (see example below).

General info

Specification
DOM L3
Interface
UIEvent if generated from a user interface, Event otherwise.
Bubbles
No
Cancelable
No
Target
defaultView, Document, Element
Default Action
None.

Properties

{{OpenEventProperties()}}{{UIEventProperties()}}{{CloseEventProperties()}}

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Parent Frame</title>
    <script>
      window.addEventListener('beforeunload', function(event) {
        console.log('I am the 1st one.');
      });
      window.addEventListener('unload', function(event) {
        console.log('I am the 3rd one.');
      });

</script> </head> <body> <iframe src="child-frame.html"></iframe> </body> </html>

Below, the content of child-frame.html:

<!DOCTYPE html>
<html>
  <head>
    <title>Child Frame</title>
    <script>
      window.addEventListener('beforeunload', function(event) {
        console.log('I am the 2nd one.');
      });
window.addEventListener('unload', function(event) {
console.log('I am the last one…');
});
    </script>
  </head>
  <body>
    ☻
  </body>
</html>

When the parent frame is unloaded, events will be fired in the order described by console.log messages.

{{LoadRelatedEvents()}}

Revision Source

<p>The <code>unload</code> event is fired when the document or a child resource is being unloaded.</p>
<p>It is fired after:</p>
<ol>
  <li><a href="/en-US/docs/Mozilla_event_reference/beforeunload" title="/en-US/docs/Mozilla_event_reference/beforeunload">beforeunload</a> (cancellable event)</li>
  <li><a href="/en-US/docs/Mozilla_event_reference/pagehide" title="/en-US/docs/Mozilla_event_reference/pagehide">pagehide</a></li>
</ol>
<p>The document is in a particular state:</p>
<ul>
  <li>all the resources still exist (img, iframe etc.)</li>
  <li>nothing is visible anymore to the end user</li>
  <li>UI interactions are ineffective (<code>window.open</code>, <code>alert</code>, <code>confirm</code> etc.)</li>
  <li>an error won't stop the unloading workflow</li>
</ul>
<p>Please note that the unload event also follow the document tree: parent frame unload will happen&nbsp;<em>before</em> child frame <code>unload</code> (see example below).</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 class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-unload">DOM L3</a></dd>
  <dt style="float: left; text-align: right; width: 120px;">
    Interface</dt>
  <dd style="margin: 0 0 0 120px;">
    UIEvent if generated from a user interface, Event otherwise.</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;">
    No</dd>
  <dt style="float: left; text-align: right; width: 120px;">
    Target</dt>
  <dd style="margin: 0 0 0 120px;">
    defaultView, Document, Element</dd>
  <dt style="float: left; text-align: right; width: 120px;">
    Default Action</dt>
  <dd style="margin: 0 0 0 120px;">
    None.</dd>
</dl>
<h2 id="Properties">Properties</h2>
<p>{{OpenEventProperties()}}{{UIEventProperties()}}{{CloseEventProperties()}}</p>
<h2>Example</h2>
<pre class="brush: html">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Parent Frame&lt;/title&gt;
    &lt;script&gt;
</pre>
<div>
  &nbsp; &nbsp; &nbsp; window.addEventListener('beforeunload', function(event) {</div>
<div>
  &nbsp; &nbsp; &nbsp; &nbsp; console.log('I am the 1st one.');</div>
<div>
  &nbsp; &nbsp; &nbsp; });</div>
<div>
  &nbsp; &nbsp; &nbsp; window.addEventListener('unload', function(event) {</div>
<div>
  &nbsp; &nbsp; &nbsp; &nbsp; console.log('I am the 3rd one.');</div>
<div>
  &nbsp; &nbsp; &nbsp; });</div>
<p>&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;iframe src="child-frame.html"&gt;&lt;/iframe&gt; &lt;/body&gt; &lt;/html&gt;</p>
<p>Below, the content of <code>child-frame.html</code>:</p>
<pre class="brush: html">
&lt;!DOCTYPE html&gt;
</pre>
<div>
  &lt;html&gt;</div>
<div>
  &nbsp; &lt;head&gt;</div>
<div>
  &nbsp; &nbsp; &lt;title&gt;Child Frame&lt;/title&gt;</div>
<div>
  &nbsp; &nbsp; &lt;script&gt;</div>
<div>
  &nbsp; &nbsp; &nbsp; window.addEventListener('beforeunload', function(event) {</div>
<div>
  &nbsp; &nbsp; &nbsp; &nbsp; console.log('I am the 2nd one.');</div>
<div>
  &nbsp; &nbsp; &nbsp; });</div>
<div>
  window.addEventListener('unload', function(event) {</div>
<div>
  console.log('I am the last one…');</div>
<div>
  });</div>
<div>
  &nbsp; &nbsp; &lt;/script&gt;</div>
<div>
  &nbsp; &lt;/head&gt;</div>
<div>
  &nbsp; &lt;body&gt;</div>
<div>
  &nbsp; &nbsp; ☻</div>
<div>
  &nbsp; &lt;/body&gt;</div>
<div>
  &lt;/html&gt;</div>
<p>When the parent frame is unloaded, events will be fired in the order described by <code>console.log</code> messages.</p>
<h2 id="Related_Events">Related Events</h2>
<p>{{LoadRelatedEvents()}}</p>
Revert to this revision