实现:关闭浏览器前,刷新浏览器前,切换浏览器tab,最小化浏览器等骚操作向后台发送请求(vue项目)

实现:关闭浏览器前,刷新浏览器前,切换浏览器tab,最小化浏览器等骚操作向后台发送请求(vue项目)

对于以上用户骚操作,向后台发送最后的指令,这里只做简单的记录

关闭浏览器和刷新浏览器在vue的生命钩子create函数中实现:通过window.onbeforeunload事件实现,这里要特别注意的是,接口请求必须是同步的

created() {
    window.onbeforeunload = function() {
        // 同步的接口请求
    }
}
export function totalTime (param) {
    return new Promise((resolve,reject)=>{
        $.ajax({
         contentType: 'application/json;charset=UTF-8',
         type: 'post',
         url: '',
         data:,
         asunc: false,
         dataType: 'json',
         success: function(res) {
            resolve(res)
         }
         error: function(res) {
             resject(res)
         }
        })
    })
}

tab切换的实现:;有一个问题:不能把这个全局事件移除

document.addEventListener('visibilitychange',function(){ //浏览器切换事件
  if(document.visibilityState=='hidden') { //离开当前tab标签
   console.log("离开当前tab标签");
  }else {/回到当前tab标签
    console.log("回到当前tab标签");
  }
});

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值