Window: beforeunload event

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

Bubbles No
Cancelable Yes
Interface Event
Event handler property onbeforeunload

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

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

但是请注意,并非所有浏览器都支持此方法,而有些浏览器需要事件处理程序实现两个遗留方法中的一个作为代替:

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

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

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

将事件处理程序/监听器加到window或 documentbeforeunload事件后,将阻止浏览器使用内存中的页面导航缓存,例如Firefox的Back-Forward缓存WebKit的Page Cache

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

示例

HTML规范指出作者应该使用 Event.preventDefault() 而非 Event.returnValue,然而,不是所有浏览器都支持这么做。

window.addEventListener('beforeunload', (event) => {
  // Cancel the event as stated by the standard.
  event.preventDefault();
  // Chrome requires returnValue to be set.
  event.returnValue = '';
});

规范

规范 状态 注释
HTML Living Standard
beforeunload
Living Standard
HTML5
beforeunload
Recommendation Initial definition

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
beforeunload eventChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 4Opera Full support 12Safari Full support 3WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 12Safari iOS Full support 1Samsung Internet Android Full support 1.0
Custom text support
DeprecatedNon-standard
Chrome No support ? — 51Edge No support NoFirefox No support ? — 44IE Full support YesOpera No support ? — 38Safari No support ? — 9WebView Android No support ? — 51Chrome Android No support ? — 51Firefox Android No support ? — 44Opera Android No support ? — 41Safari iOS No support NoSamsung Internet Android No support ? — 5.0
Activation using event.returnValue = "string";
Deprecated
Chrome Full support 30Edge Full support 12Firefox Full support YesIE Full support YesOpera ? Safari ? WebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS No support NoSamsung Internet Android Full support Yes
Activation using event.preventDefault()Chrome No support NoEdge No support 12 — 79Firefox Full support YesIE Full support 9Opera No support NoSafari Full support 11WebView Android No support NoChrome Android No support NoFirefox Android Full support YesOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
Activation using return "string";
Deprecated
Chrome Full support 1Edge Full support 12Firefox Full support 1IE Full support YesOpera Full support 12Safari Full support 3WebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS No support NoSamsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.

参阅