美文网首页
2020-02-11 vue 关闭窗体并利用navigator.

2020-02-11 vue 关闭窗体并利用navigator.

作者: 追寻1989 | 来源:发表于2020-02-11 22:53 被阅读0次
export default { 
  data(){
        return{
           _beforeUnload_time:0,
           _gap_time:0,
        }
  },
  mounted() {
      //组件挂载时监听窗体关闭监听事件
      window.addEventListener("beforeunload", e => {
        this.beforeunloadHandler(e);
      });
      window.addEventListener('unload', e => this.unloadHandler(e))
  },
  destroyed() {
      //组件销毁时清除窗体监听事件
      window.removeEventListener("beforeunload", e => {
        this.beforeunloadHandler(e);
      });
      window.removeEventListener('unload', e => this.unloadHandler(e))
  },
  methods:{
    //判断是窗口关闭还是刷新
    unloadHandler(e){
      this._gap_time=new Date().getTime()-this._beforeUnload_time;
      if(this._gap_time<=5){
        //关闭要做的事情(这里可以发送请求,window.beforeunload事件在window.unload事件之前执行。同时注意ajax请求方式必须为同步请求,所以不能使用axios,因为axios不能执行同步请求,推荐使用navigator.sendBeacon。原因参考文章里有介绍)
      // 获取当前域名
      let protocolStr = window.location.protocol;
      let k_host = window.location.host;
      let path = protocolStr + "//" + k_host;
      //判断运行环境,设置跨域代理前缀
      if(process.env.NODE_ENV === 'development') {
        path =  '/api';
      }
       //发送需要的请求
        const res= navigator.sendBeacon(path+'/xxxxx/abc.jhtml', '') //sendBeacon 接收两个参数 navigator.sendBeacon(url, data); url 请求路径 data 请求参数 发送方式为POST,需要后端支持
       //由于关闭窗体无法控制台调试,借助本地存储查看发送结果,true发送成功,false发送失败
        if(exportEndRes){
          window.localStorage.setItem("isRquire",JSON.stringify(exportEndRes))
        }
      }else{
        //刷新要做的事情...
      }
    }
    /**
     * [beforeunloadHandler 浏览器关闭时进行用户提示]
     * @return {[type]} [description]
     */
    beforeunloadHandler(e) {
      this._beforeUnload_time=new Date().getTime();
    }
  }
 }
}

参考文献:

1.Vue中关闭浏览器不会触发onbeforeunload 无效

2.sendBeacon 刷新/关闭页面之前发送请求

相关文章

网友评论

      本文标题:2020-02-11 vue 关闭窗体并利用navigator.

      本文链接:https://www.haomeiwen.com/subject/vmmffhtx.html