zoukankan      html  css  js  c++  java
  • close事件 vue_vue 监听浏览器关闭事件

    用vue做的项目,有个需求就是关闭浏览器的时候,需要往后台提交有个接口,来监听这个账号有没有下线。

    网上找了很多种方法,一直没有实现。

    主要困惑点:

    1、浏览器关闭是事件,是什么

    onbeforeunload、onunload  又是各种百度,

    window.addEventListener( ‘beforeunload’,e =>(

    执行…

    ) )

    mounted () {

    window.addEventListener('beforeunload', e => {

    window.localStorage.removeItem('titleName')

    });

    },

    mounted () {

    window.addEventListener( 'beforeunload', e => this.set() );

    },

    methods:{

    set(){

    console.log('我是要调用的函数')

    }

    }

    把请求接口放到 set中,关闭浏览器的时候是可以请求接口了,但是,刷新时候也请求,不符合要求。。。。然后又是各种百度

    2、怎么区分浏览器刷新与关闭(网上找的方法,不知道出处是哪里,)

    var _beforeUnload_time = 0,_gap_time=0;

    window.οnunlοad=function(){

    _gap_time=new Date().getTime()-_beforeUnload_time;

    if(_gap_time<=5){

    //浏览器关闭

    $.ajax({

    url:'/movecheck/logout',

    // dataType:"JSON",

    cache:false,

    type:'post',

    async:false,

    success:function(dt){

    //  console.log(dt)

    },

    error:function(dt){

    }

    })

    }

    }

    window.οnbefοreunlοad=function(){

    _beforeUnload_time=new Date().getTime();

    }

    });

    确实,这个方法是可以区分浏览器是刷新还是 关闭,所以我就把上面的方法里面的ajax方法改成 axios,结果不如意,根本不会执行axios接口,ajax中有个配置async:false,发现axios中没有,又各种百度,没有找到解决方法。

    突然灵机一动,第一个是 能执行接口,但是区分不了刷新与关闭,第二个能区分刷新与关闭,执行不了接口,那为何不把这两个结合起来,哈哈哈哈。。。。。恩,问题解决了(机智如我)

    addEventListener,好好看看这个事件,不说了

  • 相关阅读:
    PostgreSQL数据库笔记
    LayUI
    Spring
    Mybatis
    Mybatis生成
    server服务器信息页面添加步骤
    Java数据类型和MySql数据类型对应表
    空字符串
    json解析尖括号<>
    JSON--List集合转换成JSON对象
  • 原文地址:https://www.cnblogs.com/1549983239yifeng/p/14296707.html
Copyright © 2011-2022 走看看