diff options
Diffstat (limited to 'files/zh-cn/web/api/window/unload_event/index.html')
| -rw-r--r-- | files/zh-cn/web/api/window/unload_event/index.html | 126 |
1 files changed, 126 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/window/unload_event/index.html b/files/zh-cn/web/api/window/unload_event/index.html new file mode 100644 index 0000000000..dc03afe51f --- /dev/null +++ b/files/zh-cn/web/api/window/unload_event/index.html @@ -0,0 +1,126 @@ +--- +title: unload +slug: Web/API/Window/unload_event +tags: + - Window + - events + - unload +translation_of: Web/API/Window/unload_event +original_slug: Web/Events/unload +--- +<p>{{APIRef}}</p> + +<p>当文档或一个子资源正在被卸载时, 触发 <strong>unload</strong>事件。</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("Event")}}</td> + </tr> + <tr> + <th scope="row">事件处理程序属性（Event handler property）</th> + <td>{{domxref("WindowEventHandlers/onunload", "onunload")}}</td> + </tr> + </tbody> +</table> + +<p>它在下面两个事件后被触发:</p> + +<ol> + <li><a href="/en-US/docs/Mozilla_event_reference/beforeunload" title="/en-US/docs/Mozilla_event_reference/beforeunload">beforeunload</a> (可取消默认行为的事件)</li> + <li><a href="/en-US/docs/Mozilla_event_reference/pagehide" title="/en-US/docs/Mozilla_event_reference/pagehide">pagehide</a></li> +</ol> + +<p>文档处于以下状态：</p> + +<ul> + <li>所有资源仍存在 (图片, iframe 等.)</li> + <li>对于终端用户所有资源均不可见</li> + <li>界面交互无效 (<code>window.open</code>, <code>alert</code>, <code>confirm</code> 等.)</li> + <li>错误不会停止卸载文档的过程</li> +</ul> + +<p>请注意<code>unload</code>事件也遵循文档树:父iframe会在子iframe卸载前卸载(参考下面的例子).</p> + +<h2 id="示例">示例</h2> + +<pre class="brush: html notranslate"><!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></pre> + +<p>下面是 <code>child-frame.html的内容</code>:</p> + +<pre class="brush: html notranslate"><!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 4th and last one…'); + }); + </script> + </head> + <body> + ☻ + </body> +</html></pre> + +<p>当父iframe被卸载，事件将按<code>console.log()</code> 消息描述的顺序触发。</p> + +<h2 id="规范">规范</h2> + +<table> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">描述</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('UI Events', '#event-type-unload', 'unload')}}</td> + <td>{{Spec2('UI Events')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Window.unload_event")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>相关事件： {{domxref("Window/DOMContentLoaded_event", "DOMContentLoaded")}}, {{domxref("Document/readystatechange_event", "readystatechange")}}, {{domxref("Window/load_event", "load")}}</li> + <li><a href="https://html.spec.whatwg.org/multipage/browsers.html#unloading-documents">Unloading Documents — unload a document</a></li> +</ul> |