Window:beforeunload 事件
当浏览器窗口关闭或者刷新时,会触发 beforeunload
事件。当前页面不会直接关闭,可以点击确定按钮关闭或刷新,也可以取消关闭或刷新。
Bubbles | No |
---|---|
Cancelable | Yes |
Interface | Event |
Event handler property |
onbeforeunload
|
事件使网页能够触发一个确认对话框,询问用户是否真的要离开该页面。如果用户确认,浏览器将导航到新页面,否则导航将会取消。
根据规范,要显示确认对话框,事件处理程序需要在事件上调用preventDefault()
。
但是请注意,并非所有浏览器都支持此方法,而有些浏览器需要事件处理程序实现两个遗留方法中的一个作为代替:
- 将字符串分配给事件的
returnValue
属性 - 从事件处理程序返回一个字符串。
某些浏览器过去在确认对话框中显示返回的字符串,从而使事件处理程序能够向用户显示自定义消息。但是,此方法已被弃用,并且在大多数浏览器中不再支持。
为避免意外弹出窗口,除非页面已与之交互,否则浏览器可能不会显示在beforeunload
事件中创建的提示,甚至根本不会显示它们。
将事件处理程序/监听器加到window
或 document
的beforeunload
事件后,将阻止浏览器使用内存中的页面导航缓存,例如Firefox 的 Back-Forward 缓存或WebKit 的 Page Cache。
HTML 规范指出在此事件中调用window.alert()
,window.confirm()
以及window.prompt()
方法,可能会失效。更多详细信息,请参见HTML 规范。
示例
HTML 规范指出作者应该使用 Event.preventDefault()
而非 Event.returnValue
,然而,不是所有浏览器都支持这么做。
js
window.addEventListener("beforeunload", (event) => {
// Cancel the event as stated by the standard.
event.preventDefault();
// Chrome requires returnValue to be set.
event.returnValue = "";
});
规范
Specification |
---|
HTML Standard # event-beforeunload |
HTML Standard # handler-window-onbeforeunload |
浏览器兼容性
BCD tables only load in the browser
参见
BeforeUnloadEvent
接口- 相关事件:
- 页面生命周期 API 为处理 Web 应用程序中的页面生命周期的处理提供了更多有用的指导。