beforeunload

翻译不完整。 请帮助我们翻译这篇文章!

当浏览器窗口关闭或者刷新时,会触发beforeunload事件。当前页面不会直接关闭,可以点击确定按钮关闭或刷新,也可以取消关闭或刷新。

如果处理函数为Event对象的returnValue属性赋值非空字符串,浏览器会弹出一个对话框,来询问用户是否确定要离开当前页面(如下示例)。有些浏览器会将返回的字符串展示在弹框里,但有些其他浏览器只展示它们自定义的信息。没有赋值时,该事件不做任何响应。

注:为了避免不必要的弹窗,如果页面并没有发生交互浏览器可能不会展示在 beforeunload 事件中引发的弹框,甚至可能即使发生交互了也直接不显示。

冒泡
是否可取消
接口 Event
时间处理熟悉 onbeforeunload

此事件使网页能够触发一个确认对话框,询问用户是否真的要离开该页面。如果用户确认,浏览器将导航到新页面,否则导航将会取消。

根据规范,要显示确认对话框,在事件处理上需要调用preventDefault()

但是请注意,并非所有浏览器都支持此方法,有些浏览器的事件处理的以下两种方法实现作为代替:

  • 将字符串分配给事件的returnValue属性
  • 从事件处理程序返回一个字符串。

某些浏览器过去在确认对话框中显示返回的字符串,从而使事件处理程序能够向用户显示自定义消息。但是,此方法已被弃用,并且在大多数浏览器中不再支持。

为避免意外弹出窗口,除非页面已与之交互,否则浏览器可能不会显示在beforeunload事件中创建的提示,甚至根本不会显示它们。

将事件/监听加到窗口或文档的beforeunload事件后,将阻止浏览器使用内存中的页面导航缓存,例如Firefox的Back-Forward缓存WebKit的Page Cache

HTML规范指出在此事件中调用window.alert()window.confirm()以及window.prompt()方法,可能会失效。更多详细信息,请参见HTML规范

属性

属性 类型 描述

target只读

EventTarget 事件目标(DOM 顶层目标)

type只读

DOMString 事件类型

bubbles只读

Boolean 事件是否正常起泡
cancelable只读 Boolean 是否可以取消事件
returnValue DOMString 当前事件返回值(显示给用户的消息)

示例

window.addEventListener("beforeunload", function (event) {
  event.returnValue = "\o/";
});

// 等价于
window.addEventListener("beforeunload", function (event) {
  event.preventDefault();
});

基于WebKit内核的浏览器在弹出提示框时未遵循该规范。跨浏览器可运行的示例,代码基本如下:

window.addEventListener("beforeunload", function (e) {
  var confirmationMessage = "\o/";

  (e || window.event).returnValue = confirmationMessage;     // Gecko and Trident
  return confirmationMessage;                                // Gecko and WebKit
});

注意

从2011年5月25号开始,HTML5规范指出在此事件处理函数中,对于window.alert(), window.confirm(), 和 window.prompt() 的调用会被忽略。详见HTML5规范说明。

同样需要注意的是许多手机浏览器会忽略该事件处理的返回值(亦即,它们不会要求用户确认,而是直接执行操作)Firefox在about:config中有一个隐藏的设置来做同样的事。其实就是用户确认文档总会被卸载。

规范

Specification Status Comment
HTML Living Standard
beforeunload
Living Standard
HTML5
beforeunload
Recommendation Initial definition

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 (Yes) 1 4 12 3
Custom text support removed 51.0 未实现 44.0 (44.0) 38 9.1
Feature Android Android Webview Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
Basic support ? (Yes) (Yes) ? ? ? (no) defect (Yes)
Custom text support removed ? 51.0 未实现 44.0 (44.0) 51.0

See also