标签：浏览器 time 接口 onbeforeunload window 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))
},

 

标签：浏览器,time,接口,onbeforeunload,window,localStorage,关闭,._
来源： https://www.cnblogs.com/dancer0321/p/14677177.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。