实现:关闭浏览器前,刷新浏览器前,切换浏览器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标签");
  }
});
发布了86 篇原创文章 · 获赞 15 · 访问量 7万+

猜你喜欢

转载自blog.csdn.net/qq_39579242/article/details/91047794
今日推荐