定义

复制 1onbeforeunload 事件在即将离开当前页面（刷新或关闭）时触发。
 2该事件可用于弹出对话框，提示用户是继续浏览页面还是离开当前页面。

onbeforeunload事件在onunload事件之前触发。

调用方式

MDN官方示例：

复制 1window.addEventListener('beforeunload', function (e) {
 2    
 3    e.preventDefault();
 4    
 5    e.returnValue = '自定义文本';
 6});

复制 1window.onbeforeunload = function(event) { 
 2	...
 3};

或者在body标签上绑定onbeforeunload，但更推荐使用addEventListener的方式调用。

如果需要添加beforeunload点击确认后的处理代码，可以直接添加unload事件监听。

复制 1window.addEventListener('unload', function(event) {
 2        console.log('onunload！！！！！')
 3        let xhr = new XMLHttpRequest();
 4        xhr.open('get', '/test', true)
 5        xhr.send()
 6        
 7        let now = new Date()
 8        while (new Date() - now < 100) { }
 9});

注意事项

使用方式

HTML规范建议作者使用 Event.preventDefault() 而非 Event.returnValue 的方式来提示用户。但是，该种方法还没有得到全部浏览器的支持，所以需要配合使用。

returnValue返回值

当事件返回值不是null或者undefined时，用户将会被提醒是否离开页面。（但测试后发现即便返回null或者undefined，弹出框也会被展示）。 如果不需要展示弹窗，不使用 Event.preventDefault()，Event.returnValue即可。

returnValue自定义文本无效

在旧版本浏览器中，事件的返回值会被展示在对话框中。但从Firefox 44，Chrome 51，Opera 38，和Safari 9.1以后，返回文本将不会被展示，换言之，无法自定义弹窗提示文本。

默认的提示文本如下：

复制 1Firefox（66.0.3）
 2“此页面想询问您是否要离开 - 您输入的数据可能不会被保存”
 3
 4Safari（10.1.2）
 5“您确定要离开此页面吗？”
 6
 7Chrome（74.0.3729.131）
 8“重新加载此网站？”
 9“系统可能不会保存您所做的更改。”

alert，confirm，prompt不执行

在一些浏览器中，在onbeforeunload中调用alert，confirm，prompt等方法会被忽略。

onbeforeunload无效

之前遇到的情况是，在chrome中onbeforeunload事件时而执行时而失效，以为是浏览器的兼容问题，百思不得其解，但后来发现如下解释：

复制 1As of Chrome 60, the confirmation will be skipped if the user has not performed a gesture in the frame or page since it was loaded.

在Chrome和Firefox中，页面加载完成后，如果用户未对页面进行操作，比如“点击”、“输入”等等，onbeforeunload将不会被执行。而在Safari中onbeforeunload总是会被执行。

需要指出的是，许多浏览器会忽略该事件并自动关闭页面无需用户的确认。火狐浏览器在配置页面about:config设有一个dom.disable_beforeunload的开关变量用于开启这个功能。

unload加异步请求

unload事件如果要发异步请求的话，需要后面给补一段同步代码阻塞一下，否则请求会发不出去。