監聽頁面關閉和刷新的總結

　　做開發的一個很重要的能力就是異常場景處理。而頁面的一個很常見的異常場景就是頁面關閉和刷新，尤其是對於需要即時刷新、定時操作、自動提交的場景。而我們應該都知道，監聽瀏覽器頁面關閉和刷新的一個很常用的事件就是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 '確認關閉'
    } */