技术CTO-关注编程入门知识,提供编程入门教程

您的位置: 首页 > 前端开发 > javascript > 正文

通过js如何实现像Web QQ 那样判断用户是否关闭浏览器退出

来源: 技术CTO 阅读:

通过js如何实现像Web QQ 那样判断用户是否关闭页面退出:
主要分为三种情况
1、用户刷新:获取当前用户的操作为刷新页面(分为按F5刷新页面和右键重新载入刷新)
2、用户直接点击浏览器的关闭按钮
3、用户通过右键点击任务栏上的应用程序任务,进行关闭操作。

我的问题就是如何能实现像Web QQ那样判断用户触发了以上三种事件后弹出一个简单的对话框,用户点击确定就执行操作,取消就什么都不执行,之前在网上找了一些方法。我贴出来大家帮忙参考一下,或者有什么更好的方法,请不吝赐教


另注:用户通过任务管理器进行强制结束应用程序任务不再本问题考虑范围


<script type="text/javascript">     
        <!--  
        window.onunload = onunload_handler;  
         function onunload_handler(){   
            CloseOpen(event); 
        }   
        
        function CloseOpen(event) { 
                 //直接点击了任务栏上的关闭按钮
                 if(event.clientX<=0 || event.clientY<0) { 
                     //获取当前时间
                   var date=new Date();
                   //将date设置为过去的时间
                   //alert("关闭网页");
                   return confirm('您确定要关闭网页么')
                    parent.location.href='../loginout.aspx';
                    
                   date.setTime(date.getTime()-10000);
                   //将userId这个cookie删除
                   document.cookie="zhuangtao;expire="+date.toUTCString();
                   document.cookie="quanxianzifucuan;expire="+date.toUTCString();
                   document.cookie="quanxian;expire="+date.toUTCString();
                  s0 += "关闭窗口!"; sw = 1;
                    onbeforeunload();
                   // window.event.returnValue = '关闭浏览器将退出系统.';
                 } 
                 else 
                 { 
                        alert("刷新或离开"); 
                 } 
          } 
                      
            var currentKeyCode = -1;

            function document.onkeydown() { // 本窗口的所有下属页面都必须含有本函数

               top.currentKeyCode = event.keyCode;
            }

            function onbeforeunload(){
            
             var sw = 0, s0 = "";
                if (currentKeyCode == 116) 
                {
                   s0 += "刷新窗口!(F5)";
                }
                else 
                {
                   if ((event.altKey) || (currentKeyCode == 115))
                    {
                          s0 += "关闭窗口!(alt+F4)"; sw = 1;
                           //获取当前时间
                           var date=new Date();
                           //将date设置为过去的时间
                          alert("关闭窗口");
                           date.setTime(date.getTime()-10000);
                           //将userId这个cookie删除
                           document.cookie="zhuangtao;expire="+date.toUTCString();
                           document.cookie="quanxianzifucuan;expire="+date.toUTCString();
                           document.cookie="quanxian;expire="+date.toUTCString();
                    }
                    else 
                    {
                       if ((event.clientX > 0)&&(event.clientX < document.body.clientWidth)) 
                       {
                          s0 += "刷新窗口!";
                       }
                       else 
                       {
                        //获取当前时间
                           var date=new Date();
                           //将date设置为过去的时间
                           alert("关闭网页");
                           date.setTime(date.getTime()-10000);
                           //将userId这个cookie删除
                           document.cookie="zhuangtao;expire="+date.toUTCString();
                           document.cookie="quanxianzifucuan;expire="+date.toUTCString();
                           document.cookie="quanxian;expire="+date.toUTCString();
                          s0 += "关闭窗口!"; sw = 1;
                       }
                    }
                }
                if (sw == 1) 
                {
                  event.returnValue = "";
                }
                else 
                {
                  currentKeyCode = -1;
                }
            
            }
        // -->  
    </script>
以上是我找到的一篇帖子,改过来用的,但是效果不是我想实现的那种
求高手帮顶
我也顶一下,这个东东也试过。反正总是不完美的。看看有没有哪位朋友在仅使用js的前提下有完美点的解决方案
这个东东能完美的话,还是很实用的。想限制用户单一登录啥的都能用得上
我也想知道怎么做,之前我是监听unload事件,但是不起作用
引用 4 楼  的回复:
我也顶一下,这个东东也试过。反正总是不完美的。看看有没有哪位朋友在仅使用js的前提下有完美点的解决方案
这个东东能完美的话,还是很实用的。想限制用户单一登录啥的都能用得上

是的,我试过其他方法,都不能很好的解决,不过也有个人技术原因,所以特来求教
window.onbeforeunload = function() {
            screen.width  当前屏幕
            //document.body.clientWidth                 当前网页
            if (screen.width > document.body.clientWidth && event.clientY < 0 || event.altKey) {
window.event.returnValue="确定关闭网页";
            }else{
alert("刷新网页");
}
        }

如果确定关闭,只需要在window.onunload事件里面做操作即可。
顶  ,目前也遇到了同样的问题 数据库用户表中有一列is_online   表示用户是否在线   0为不在线   1为在线
用户登录成功之后修改   state=1
用户点击退出按钮之后修改   state=0 这样本来很完美
 但是   如果用户登录成功之后   没有点击退出按钮退出     而是直接关闭浏览器   这样就不会修改state=0  如何在用户关闭浏览器之后   也修改state=0  这个非常重要 

^_^ 如果您热爱技术、热爱编程,想与更多的朋友一起交流学习,欢迎加入本站官方QQ群:345733473 ^_^