快捷導(dǎo)航

Vue 實(shí)現(xiàn)監(jiān)聽(tīng)窗口關(guān)閉事件,并在窗口關(guān)閉前發(fā)送請(qǐng)求

更新時(shí)間：2020年09月01日 09:21:20 作者：沙門(mén)空海

這篇文章主要介紹了Vue 實(shí)現(xiàn)監(jiān)聽(tīng)窗口關(guān)閉事件,并在窗口關(guān)閉前發(fā)送請(qǐng)求，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

網(wǎng)上很多博客說(shuō)監(jiān)聽(tīng)窗口關(guān)閉事件使用window.beforeunload,但是這個(gè)監(jiān)聽(tīng)事件也會(huì)在頁(yè)面刷新的時(shí)候執(zhí)行，經(jīng)過(guò)百度和自己的實(shí)際測(cè)試，

終于解決了這個(gè)問(wèn)題，代碼如下：

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: {
   beforeunloadHandler(){
    this._beforeUnload_time=new Date().getTime();
   },
   unloadHandler(e){
    this._gap_time=new Date().getTime()-this._beforeUnload_time;
    debugger
    //判斷是窗口關(guān)閉還是刷新
    if(this._gap_time<=5){
     //如果是登錄狀態(tài)，關(guān)閉窗口前，移除用戶(hù)
     if(!this.showLoginButton){
      $.ajax({
       url: '/pictureweb/user/remove',
       type: 'get',
       async:false, //或false,是否異步
       
      })
     }
    }
   },
}

window.beforeunload事件在window.unload事件之前執(zhí)行。同時(shí)注意ajax請(qǐng)求方式必須為同步請(qǐng)求，所以不能使用axios,因?yàn)閍xios不能執(zhí)行同步請(qǐng)求。

補(bǔ)充知識(shí)：vue如何在用戶(hù)要關(guān)閉當(dāng)前網(wǎng)頁(yè)時(shí)彈出提示

效果如下圖

正常 js 頁(yè)面處理方式

window.onbeforeunload = function (e) {
 e = e || window.event;
 // 兼容IE8和Firefox 4之前的版本
 if (e) {
  e.returnValue = '關(guān)閉提示';
 }
 // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
 return '關(guān)閉提示';
};

vue 中處理方式

let _this = this
  window.onbeforeunload = function (e) {
   if (_this.$route.name == "dyyPerformanceCenterSale") {
    e = e || window.event;
    // 兼容IE8和Firefox 4之前的版本
    if (e) {
     e.returnValue = '關(guān)閉提示1111';
    }
    // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
    return '關(guān)閉提示222';
   } else {
    window.onbeforeunload = null
   }
  };

針對(duì)很多同學(xué)說(shuō)的沒(méi)有實(shí)現(xiàn) ，我這里在詳細(xì)描述一下方法寫(xiě)在 mounted里面，然后記得把route name替換成自己當(dāng)前頁(yè)面。

以上這篇Vue 實(shí)現(xiàn)監(jiān)聽(tīng)窗口關(guān)閉事件,并在窗口關(guān)閉前發(fā)送請(qǐng)求就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: