--- title: 'Window: beforeunload event' slug: Web/Events/beforeunload tags: - Event - Window - beforeunload - 事件 - 参考 translation_of: Web/API/Window/beforeunload_event ---

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

Bubbles No
Cancelable Yes
Interface {{domxref("Event")}}
Event handler property {{domxref("WindowEventHandlers/onbeforeunload", "onbeforeunload")}}

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

根据规范，要显示确认对话框，事件处理程序需要在事件上调用{{domxref("Event.preventDefault()", "preventDefault()")}}。

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

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

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

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

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

示例

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

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

规范

规范 状态 注释
{{SpecName("HTML WHATWG", "indices.html#event-beforeunload", "beforeunload")}} {{Spec2("HTML WHATWG")}}
{{SpecName("HTML5 W3C", "browsers.html#unloading-documents", "beforeunload")}} {{Spec2("HTML5 W3C")}} Initial definition

浏览器兼容性

{{Compat("api.Window.beforeunload_event")}}

参阅