---
title: 'Window: 页面隐藏事件(pagehide event)'
slug: Web/API/Window/pagehide_event
tags:
  - API
  - Event
  - Navigation
  - pagehide event
  - sendBeacon
  - 前端监控
  - 埋点
  - 数据上报
translation_of: Web/API/Window/pagehide_event
---
<div>{{APIRef("HTML DOM")}}</div>

<p>当浏览器在显示与会话历史记录不同的页面的过程中隐藏当前页面时, <span class="seoSummary"><strong><code>pagehide</code></strong></span>(页面隐藏)事件会被发送到一个<span class="seoSummary">{{domxref("Window")}} 。</span>例如，当用户单击浏览器的“后退”按钮时，当前页面在显示上一页之前会收到一个<code>pagehide</code>(页面隐藏)事件。</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row">Bubbles(冒泡)</th>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Cancelable(可取消)</th>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Interface(接口)</th>
   <td>{{domxref("PageTransitionEvent")}}</td>
  </tr>
  <tr>
   <th scope="row">Event handler property(事件处理程序属性)</th>
   <td>{{domxref("Window.onpagehide", "onpagehide")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="例子">例子</h2>

<p>在此示例中，建立了一个事件处理程序以监视 <code>pagehide </code>(页面隐藏)事件，并在持久保存页面以进行可能的重用时执行特殊处理。</p>

<pre class="brush: js notranslate">window.addEventListener("pagehide", event =&gt; {
  if (event.persisted) {
    /* the page isn't being discarded, so it can be reused later */
  }
}, false);
</pre>

<p>这也可以使用 {{domxref("Window")}} 上的 {{domxref("Window.onpagehide", "onpagehide")}} 事件处理程序属性来编写：</p>

<pre class="brush: js notranslate">window.onpagehide = event =&gt; {
  if (event.persisted) {
    /* the page isn't being discarded, so it can be reused later */
  }
}
</pre>

<h2 id="规范">规范</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>{{SpecName('HTML WHATWG', 'browsing-the-web.html#event-pagehide', 'pagehide')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>Initial specification.</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'browsers.html#event-pagehide', 'pagehide')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>



<p>{{Compat("api.Window.pagehide_event")}}</p>

<h2 id="了解更多">了解更多</h2>

<ul>
 <li>The {{domxref("Window.pageshow_event", "pageshow")}} event</li>
</ul>

<div id="gtx-trans" style="position: absolute; left: 156px; top: 1657px;">
<div class="gtx-trans-icon"></div>
</div>