0


vue 监听浏览器网页关闭和网页刷新事件

1、监听浏览器页面关闭/刷新事件。

运用场景:浏览器页面关闭后删除local storage、session、cookie、发送请求等。


//绑定监听事件
mounted() {
    window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
}
methods: {
    beforeunloadHandler(e) {
      console.log('关闭后=>为所欲为')
    }
},
//页面销毁前解除监听
destroyed() {
    window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
}

2、只监听浏览器关闭事件

data(){
    return{
          beforeUnload: '',
          Handler: ''
    }
}
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))
},
ethods: {
   beforeunloadHandler(){
      this.beforeUnload=new Date().getTime();
   },
   unloadHandler(e){
     this.Handler=new Date().getTime()-this.beforeUnload;
        //判断是窗口关闭还是刷新
        if(this.Handler<=5){
         console.log('为所欲为');
        }
      },
}

本文转载自: https://blog.csdn.net/weixin_60842212/article/details/127383583
版权归原作者 衫裤泡露 所有, 如有侵权,请联系我们删除。

“vue 监听浏览器网页关闭和网页刷新事件”的评论:

还没有评论