监听页面刷新和关闭事件

场景：在离开页面的时候，需要弹出提示框，让用户确定是否真的要关闭网页。如果用户真的需要关闭网页，则让浏览器向后台提交信息。

浏览器页面事件基础

1. 页面加载时只执行 onload 事件。
2. 页面关闭时，先 onbeforeunload 事件，再 onunload 事件。
3. 页面刷新时先执行 onbeforeunload事件，然后 onunload 事件，最后 onload 事件

window.onbeforeunload = function (e) {
  e = e || window.event;

  // 兼容IE8和Firefox 4之前的版本
  if (e) {
    e.returnValue = '关闭提示';
  }

  // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
  return '关闭提示';
};

说明：当该事件返回的字符串（事前设置好的event.returnValue的值）不为null或者undefined时，弹出确认窗口让用户自行选择是否关闭当前页面。一些浏览器将该事件返回的字符串显示在弹出窗上。从Firefox 4、 Chrome 51、Opera 38 和Safari 9.1开始，通用确认信息代替事件返回的字符串。比如，火狐上会显示“本页面要求您确认您要离开 - 您输入的数据可能不会被保存”

页面刷新和关闭的事件监听

1.在methods中绑定回调方法

 methods: {
    leaveConfirm (e) {
      e = e || window.event
      if (e) {
        e.returnValue = '关闭提示'
      }
      return '关闭提示'
    },
    updateRecord () {
      // 调用后台接口
    }
 }

2.在created/mounted中添加监听

created () {
    window.addEventListener('beforeunload', this.leaveConfirm)
    window.addEventListener('unload', this.updateRecord)
 }

3.在destory中卸载监听

destroyed () {
    window.removeEventListener('beforeunload', this.leaveConfirm)
    window.removeEventListener('unload', this.updateRecord)
  }

注意：

1. updateRecord需要使用同步方法，或者使用Navigator.sendBeacon()，否则可能会因为页面卸载导致终止了对后台的访问。
2. 若使用axios直接向后台提交数据，数据存在没有被提交的可能。因为axios是异步请求，请求可能会在浏览器关闭或重新加载前还未发送至服务端就被浏览器cancel掉，导致数据上报失败。异步请求响应返回后，由于页面和相关资源已经卸载，会引起function not found的错误。

通过XMLHttpRequest发送同步请求

updateRecord(){
  var xmlhttp = new XMLHttpRequest(); 
  let data = {"id":"1111","resumeStatus":"1"};
  xmlhttp.open("POST", "http://localhost:8080/updateRecord", false);
  xmlhttp.setRequestHeader('Content-Type','application/json;charset=UTF-8')
  xmlhttp.send(JSON.stringify(data)); 
}

navigator.sendBeacon

updateRecord(){
  navigator.sendBeacon(url,data)
}