beforeunload
event is fired when the window, the document and its resources are about to be unloaded.
When a non-empty string is assigned to the
returnValue
Event property, a dialog box appears, asking the users for confirmation to leave the page (see example below). When no value is provided, the event is processed silently. Some implementations only show the dialog box if the frame or any embedded frame receives a user gesture or user interaction. See
浏览器兼容性
了解更多信息。
<div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveAspectRatio="xMinYMin meet"><a xlink:href="../API/Event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#D4DDE4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#D4DDE4"/><a xlink:href="../API/BeforeUnloadEvent" target="_top"><rect x="116" y="1" width="170" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text x="201" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">BeforeUnloadEvent</text></a></svg></div>
a:hover text { fill: #0095DD; pointer-events: all;}
| 冒泡 | No |
| 可取消 | Yes |
| Target objects | defaultView |
| 接口 |
事件
|
window.addEventListener("beforeunload", function( event ) {
event.returnValue = "\o/";
});
// is equivalent to
window.addEventListener("beforeunload", function( event ) {
event.preventDefault();
});
WebKit-derived browsers don't follow the spec for the dialog box. An almost-cross-browser working example would be close to the below example.
window.addEventListener("beforeunload", function (e) {
var confirmationMessage = "\o/";
(e || window.event).returnValue = confirmationMessage; // Gecko + IE
return confirmationMessage; /* Safari, Chrome, and other
* WebKit-derived browsers */
});
| 规范 | 状态 | 注释 |
|---|---|---|
|
HTML 实时标准
The definition of 'BeforeUnloadEvent' in that specification. |
实时标准 | 初始定义 |
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
BeforeUnloadEvent
|
Chrome Yes | Edge 12 | Firefox 1.5 | IE Yes | Opera Yes | Safari Yes | WebView Android Yes | Chrome Android Yes | Firefox Android 4 | Opera Android Yes | Safari iOS Yes | Samsung Internet Android Yes |
| User interaction required for dialog box | Chrome 60 | Edge ≤79 | Firefox ? | IE ? | Opera 47 | Safari ? | WebView Android 60 | Chrome Android 60 | Firefox Android ? | Opera Android 44 | Safari iOS ? | Samsung Internet Android 8.0 |
完整支持
兼容性未知
DOMContentLoaded
readystatechange
load
beforeunload
unload