监听页面关闭和刷新的总结

　　做开发的一个很重要的能力就是异常场景处理。而页面的一个很常见的异常场景就是页面关闭和刷新，尤其是对于需要即时刷新、定时操作、自动提交的场景。而我们应该都知道，监听浏览器页面关闭和刷新的一个很常用的事件就是onbeforeunload和onload（两者作用其实是一样的，就像vue生命周期勾子destroyed和beforeDestroy），而做前端开发的这4年，几乎每年都会用到那么几次。只是有一个问题很多刚开始用这个时间的人都会遇到，那就是不生效。

　　解决方法：阻拦。每次就是阻拦，而阻拦又有两种方法，一种是直接return，不管return的是什么；一种是修改事件的returnValue。两者效果是一样的。

　　现象：阻拦之后，就会在触发时alert弹窗，这样浏览器才能有时间将里边的事件进行执行。

　　附示例代码：

 1     // 页面关闭、刷新
 2     window.onbeforeunload = (e) => {
 3       alert('===οnbefοreunlοad===')
 4       if ((event.clientX > document.body.clientWidth && event.clientY < 0) || event.altKey) {
 5         alert('你关闭了浏览器')
 6       } else {
 7         alert('你正在刷新页面')
 8       }
 9       this.playPause()
10       // e.returnValue = '确认关闭'
11       return '确认关闭'
12     }
13     /* window.onunload = (e) => {
14       alert('===οnbefοreunlοad===')
15       if ((event.clientX > document.body.clientWidth && event.clientY < 0) || event.altKey) {
16         alert('你关闭了浏览器')
17       } else {
18         alert('你正在刷新页面')
19       }
20       this.playPause()
21       e.returnValue = '确认关闭'
22       return '确认关闭'
23     } */

 

转载于:https://www.cnblogs.com/ljwsyt/p/10756701.html