【vue】监听页面刷新和关闭事件

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

需求背景

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

原始实现

在beforeDestory钩子函数中，调用提交操作。

beforeDestroy () {
    this.updateRecord()
  },

经实验验证，该方法无法达到目的。

发现beforeDestroy 只能监听到页面间的跳转，无法监听到页面刷新和关闭标签页。所以还是要借助 onbeforeunload 事件。

浏览器页面事件基础

页面加载时只执行 onload 事件。
页面关闭时，先 onbeforeunload 事件，再 onunload 事件。
页面刷新时先执行 onbeforeunload事件，然后 onunload 事件，最后 onload 事件。
** onbeforeunload事件介绍 **

onbeforeunload事件在即将离开当前页面（刷新或关闭）时触发。此时页面文档依然可见,且该事件的默认动作可以被取消。

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

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

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

可以在用户离开页面之前弹出一个确认框，让用户确认是否要真的刷新或离开当前页面。如果用户确认重载或离开，页面将会刷新或关闭。如果取消重载或离开，则关闭操作会被取消，onunload事件不会被触发。

onunload事件介绍

当页面关闭后,会触发unload事件。该事件不可取消。

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

1. 在methods中定义事件方法

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

注意：

updateRecord需要使用同步方法，或者使用Navigator.sendBeacon()，否则可能会因为页面卸载导致终止了对后台的访问。
2.在created 或者 mounted 生命周期钩子中绑定beforeunload事件和unload事件

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

3. 在 destroyed 钩子中卸载已绑定的事件

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

向后台提交数据

若使用axios直接向后台提交数据，数据存在没有被提交的可能。因为axios是异步请求，请求可能会在浏览器关闭或重新加载前还未发送至服务端就被浏览器cancel掉，导致数据上报失败。异步请求响应返回后，由于页面和相关资源已经卸载，会引起function not found的错误。

1. 通过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)); 
}

2. navigator.sendBeacon

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

更多详细内容见刷新或关闭浏览器时，向后台提交数据