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

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

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

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

　　附示例代码：

    // 页面关闭、刷新
    window.onbeforeunload = (e) => {
      alert('===onbeforeunload===')
      if ((event.clientX > document.body.clientWidth && event.clientY < 0) || event.altKey) {
        alert('你关闭了浏览器')
      } else {
        alert('你正在刷新页面')
      }
      this.playPause()
      // e.returnValue = '确认关闭'
      return '确认关闭'
    }
    /* window.onunload = (e) => {
      alert('===onbeforeunload===')
      if ((event.clientX > document.body.clientWidth && event.clientY < 0) || event.altKey) {
        alert('你关闭了浏览器')
      } else {
        alert('你正在刷新页面')
      }
      this.playPause()
      e.returnValue = '确认关闭'
      return '确认关闭'
    } */