visibilitychange

  • Revision slug: Mozilla_event_reference/visibilitychange
  • Revision title: visibilitychange
  • Revision id: 329777
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

The visibilitychange event is fired when the content of a tab has become visible or has been hidden.

General info

Specification
{{SpecName("Page Visibility API")}}
Interface
{{domxref("event")}}
Bubbles
Yes
Cancelable
No
Target
{{domxref("Document")}}
Default Action
None

Properties

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

Example

document.addEventListener("visibilitychange", function() {
  console.log( document.visibilityState );
});

Specifications

Specification Status Comment
W3C Page Visibility API {{ Spec2('Page Visibility API') }}  

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome (Webkit) Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 13 {{ property_prefix("webkit") }} {{CompatGeckoDesktop(10)}} {{ property_prefix("moz") }}
{{CompatGeckoDesktop(18)}}
 
10 {{ property_prefix("ms") }} 12.10[*] {{ CompatNo() }}
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatNo() }} {{CompatGeckoMobile(10)}} {{ property_prefix("moz") }}
{{CompatGeckoMobile(18)}}
{{ CompatUnknown() }} 12.10[*] {{ CompatNo() }}

[*] Doesn't change the {{domxref("visibilitychange")}} event when the browser window is minimized.

See also

Revision Source

<p>The <code>visibilitychange</code> event is fired when the content of a tab has become visible or has been hidden.</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;">
    {{SpecName("Page Visibility API")}}</dd>
  <dt style="float: left; text-align: right; width: 120px;">
    Interface</dt>
  <dd style="margin: 0 0 0 120px;">
    {{domxref("event")}}</dd>
  <dt style="float: left; text-align: right; width: 120px;">
    Bubbles</dt>
  <dd style="margin: 0 0 0 120px;">
    Yes</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;">
    {{domxref("Document")}}</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()}}{{CloseEventProperties()}}</p>
<h2 id="Example">Example</h2>
<pre class="brush:js;">
document.addEventListener("visibilitychange", function() {
  console.log( document.visibilityState );
});
</pre>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a class="external" href="http://dvcs.w3.org/hg/webperf/raw-file/tip/specs/PageVisibility/Overview.html" title="http://dvcs.w3.org/hg/webperf/raw-file/tip/specs/PageVisibility/Overview.html">W3C Page Visibility API</a></td>
      <td>{{ Spec2('Page Visibility API') }}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome (Webkit)</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>13 {{ property_prefix("webkit") }}</td>
        <td>{{CompatGeckoDesktop(10)}} {{ property_prefix("moz") }}<br />
          {{CompatGeckoDesktop(18)}}<br />
          &nbsp;</td>
        <td>10 {{ property_prefix("ms") }}</td>
        <td>12.10[*]</td>
        <td>{{ CompatNo() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE&nbsp;Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatNo() }}</td>
        <td>{{CompatGeckoMobile(10)}} {{ property_prefix("moz") }}<br />
          {{CompatGeckoMobile(18)}}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>12.10[*]</td>
        <td>{{ CompatNo() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<p>[*] Doesn't change the {{domxref("visibilitychange")}} event when the browser window is minimized.</p>
<h2 id="See_also">See also</h2>
<ul>
  <li><a href="/en-US/docs/DOM/Using_the_Page_Visibility_API" title="/en-US/docs/DOM/Using_the_Page_Visibility_API">Using the Page Visibility API</a></li>
</ul>
Revert to this revision