1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
|
---
title: 'Window: beforeunload event'
slug: Web/API/Window/beforeunload_event
tags:
- Event
- Window
- beforeunload
- 事件
- 参考
translation_of: Web/API/Window/beforeunload_event
original_slug: Web/Events/beforeunload
---
<p><span style="font-family: consolas,monaco,andale mono,monospace;">当浏览器窗口关闭或者刷新时，会触发beforeunload事件。当前页面不会直接关闭，可以点击确定按钮关闭或刷新，也可以取消关闭或刷新。</span></p>
<table class="properties">
<tbody>
<tr>
<th scope="row">Bubbles</th>
<td>No</td>
</tr>
<tr>
<th scope="row">Cancelable</th>
<td>Yes</td>
</tr>
<tr>
<th scope="row">Interface</th>
<td>{{domxref("Event")}}</td>
</tr>
<tr>
<th scope="row">Event handler property</th>
<td>{{domxref("WindowEventHandlers/onbeforeunload", "onbeforeunload")}}</td>
</tr>
</tbody>
</table>
<p>事件使网页能够触发一个确认对话框，询问用户是否真的要离开该页面。如果用户确认，浏览器将导航到新页面，否则导航将会取消。</p>
<p>根据规范，要显示确认对话框，事件处理程序需要在事件上调用{{domxref("Event.preventDefault()", "preventDefault()")}}。</p>
<p>但是请注意，并非所有浏览器都支持此方法，而有些浏览器需要事件处理程序实现两个遗留方法中的一个作为代替：</p>
<ul>
<li>将字符串分配给事件的<code>returnValue</code>属性</li>
<li>
<p>从事件处理程序返回一个字符串。</p>
</li>
</ul>
<p><span>某些浏览器过去在确认对话框中显示返回的字符串，从而使事件处理程序能够向用户显示自定义消息。但是，此方法已被弃用，并且在大多数浏览器中不再支持。</span></p>
<p>为避免意外弹出窗口，除非页面已与之交互，否则浏览器可能不会显示在<code>beforeunload</code>事件中创建的提示，甚至根本不会显示它们。</p>
<p>将事件处理程序/监听器加到<code>window</code>或 <code>document</code>的<code>beforeunload</code>事件后，将阻止浏览器使用内存中的页面导航缓存，例如<a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/1.5/Using_Firefox_1.5_caching">Firefox的Back-Forward缓存</a>或<a href="https://webkit.org/blog/516/webkit-page-cache-ii-the-unload-event/">WebKit的Page Cache</a>。</p>
<p>HTML规范指出在此事件中调用{{domxref("window.alert()")}}，{{domxref("window.confirm()")}}以及{{domxref("window.prompt()")}}方法，可能会失效。更多详细信息，请参见<a href="https://html.spec.whatwg.org/multipage/timers-and-user-prompts.html#user-prompts">HTML规范</a>。</p>
<h2 id="示例">示例</h2>
<p>HTML规范指出作者应该使用 {{domxref("Event.preventDefault()")}} 而非 {{domxref("Event.returnValue")}}，然而，不是所有浏览器都支持这么做。</p>
<pre class="brush: js notranslate">window.addEventListener('beforeunload', (event) => {
// Cancel the event as stated by the standard.
event.preventDefault();
// Chrome requires returnValue to be set.
event.returnValue = '';
});
</pre>
<h2 id="规范">规范</h2>
<table>
<thead>
<tr>
<th scope="col"><strong>规范</strong></th>
<th scope="col"><strong>状态</strong></th>
<th scope="col">注释</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("HTML WHATWG", "indices.html#event-beforeunload", "beforeunload")}}</td>
<td>{{Spec2("HTML WHATWG")}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName("HTML5 W3C", "browsers.html#unloading-documents", "beforeunload")}}</td>
<td>{{Spec2("HTML5 W3C")}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{Compat("api.Window.beforeunload_event")}}</p>
<h2 id="参阅">参阅</h2>
<ul>
<li>相关事件：{{domxref("Window/DOMContentLoaded_event", "DOMContentLoaded")}}, {{domxref("Document/readystatechange_event", "readystatechange")}}, {{domxref("Window/load_event", "load")}}, {{domxref("Window/unload_event", "unload")}}</li>
<li><a href="https://html.spec.whatwg.org/#prompt-to-unload-a-document">Unloading Documents — Prompt to unload a document</a></li>
<li><a href="https://developers.google.com/web/updates/2016/04/chrome-51-deprecations?hl=en#remove_custom_messages_in_onbeforeunload_dialogs">Remove Custom Messages in onbeforeload Dialogs after Chrome 51</a></li>
</ul>
|
