zoukankan      html  css  js  c++  java
  • 浏览器关闭的时候我们需要做一些事情(比如调用退出接口或者删除localStorage等等)

    一、如何判断浏览器时关闭了?

      巨坑!监听浏览器窗口关闭onbeforeunload不起作用(脱坑了啊!!)

      因业务需要,特写方法监听浏览器关闭,然后去do something

      先声明我没在忽悠,看完能实现这个需求的!!

      网上大部分推荐方法如下:

      window.onbeforeunload= function (e) {
        e = e || window.event;
        if (e) {
          e.returnValue = '关闭提示';
        }

        // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
        return '关闭提示';
      };
      是不是各位测试感觉都没有效果???

      来讲几个点:

      1、在IE中这个事件你只要去关闭窗口就触发。

      2、谷歌、火狐等在F12调试模式中也会起效

      3、谷歌、火狐、QQ等浏览器中被优化了,需要用户在页面有过任何操作才会出现提示!(坑)。

      不相信的运行下面代码

      window.onbeforeunload= function (e) {
        while(true){
          console.log('关注Jone,携手学习Python从入门到入狱');
        }

      };
      别生气,你的需求实现了啊!

      注意:alert写在里面是不起效的!!

      总结:你去写你的事件写到return之前,什么http啊什么console.log都没问题,最好直接在里面调用方法去写业务,不要写一大坨代码在这里

      附我的代码

      //Vue中写在mounted里
      mounted() {
        window.onbeforeunload= (e)=>{
          e = e || window.event;
          if (e) {
            e.returnValue = '关闭提示';
          }

          this.toCloseFun()//调用自己的方法

          // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
          return '关闭提示';
        };
      },


    很抱歉以上虽然说明了关闭浏览器时能执行上述方法,但是,你在刷新浏览器的时候同样会执行上述代码,而我现在的需求是刷新浏览器的时候不执行,关闭浏览器的时候执行。
     
    那么下面教大家如何判断浏览器是刷新还是直接关闭:

    二、vue手动判断浏览器关闭

      当浏览器关闭时,我们可以清除localstorage及cookie
      只关闭,刷新无效

      在App.js里面写入

      

    methods: {
         beforeunloadHandler(){
            this._beforeUnload_time=new Date().getTime()
        },
        unloadHandler(e){
          console.log(e)
            this._gap_time=new Date().getTime()-this._beforeUnload_time
            debugger
            //判断是窗口关闭还是刷新
            if(this._gap_time<=5){
              //如果是登录状态,关闭窗口前,移除用户
                   localStorage.removeItem('token')
            }
        },
    },

      

    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))
    },
    我一路向北,离开有你的季节...
  • 相关阅读:
    Go 指针
    Go 字符串
    Go Maps
    Go 可变参数函数
    Go 数组和切片
    pyqt5实现窗口跳转并关闭上一个窗口
    spy++查找窗口句柄
    Python中Tk模块简单窗口设计
    pyqt5无边框拖动
    pyqt5 GUI教程
  • 原文地址:https://www.cnblogs.com/dancer0321/p/14677177.html
Copyright © 2011-2022 走看看