判断用户的在线状态 onbeforeunload事件


Posted in Javascript onMarch 05, 2011

获得用户登陆状态不用说了,判断离开的话就有一点问题了,如果说用户都是按照设计者的规定触发退出事件离开的话那就没什么难度了,但是用户的离开方式多种多样,怎么在用户非法离开的时候即时的判断离开呢?最常见的非法离开就是关闭浏览器了。

<BODY onbeforeunload="body_onUnload()"> 
<script> 
window.onbeforeunload = function() { 
if (window.event.clientX>document.body.clientWidth&&event.clientY<0||event.altKey) 
{ 
alert("浏览器关闭"); 
} 
else 
{ 
alert("刷新或者跳转到其他页"); 
} 
} 
</script> 
</BODY>

以上是一个片段,BODY 的 UNLOAD和onbeforeunload事件会在浏览器清除所加载的信息时被触发,也就是说页面在回送、重定向或被关闭的时候就会触发 ,通过这个事件加上JAVASCRIPT处理就可以实现非法关闭浏览器也即时统计在线人数了。

但是有个问题,怎么判断用户是关闭还是刷新、回送、重定向呢?

window.event.clientX和window.event.clientY 将捕捉当前事件发生时鼠标相对与窗口的桌面坐标,通常情况下IE的关闭按钮都会在页面的右上部分,所以点关闭的时候鼠标的坐标的Y坐标一定是小于0的,另外,鼠标坐标的X方向上坐标数值会大于窗体宽度,所以,从这两个条件就可以判断鼠标是不是在点关闭按钮引发的onbeforeload事件。
还有一种关闭方法是ALT+F4 ,通过event.altKey就可以判断,事件发生的时候ALT键是不是被按下了,这样也就判断出了是不是时候ALT+F4来关闭窗口。

不过也出现一个问题,当使用一些特殊的左面主题的时候 关闭按钮可触发的坐标数值不一定小于窗体宽度,所以,上面例子中的window.event.clientX>document.body.clientWidth这个条件可以不要.

Javascript 相关文章推荐
Display SQL Server Login Mode
Jun 21 Javascript
JavaScript学习历程和心得小结
Aug 16 Javascript
JavaScript 判断用户输入的邮箱及手机格式是否正确
Dec 08 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
Aug 21 Javascript
EasyUi combotree 实现动态加载树节点
Apr 01 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
Jul 28 Javascript
手机端实现Bootstrap简单图片轮播效果
Oct 13 Javascript
纯javascript版日历控件
Nov 24 Javascript
学习使用bootstrap的modal和carousel
Dec 09 Javascript
详解如何使用webpack打包Vue工程
May 27 Javascript
详解angularjs 学习之 scope作用域
Jan 15 Javascript
vue项目中监听手机物理返回键的实现
Jan 18 Javascript
在多个页面使用同一个HTML片段《续》
Mar 04 #Javascript
在多个页面使用同一个HTML片段的代码
Mar 04 #Javascript
如何确保JavaScript的执行顺序 之实战篇
Mar 03 #Javascript
如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙
Mar 03 #Javascript
如何确保JavaScript的执行顺序 之jQuery.html深度分析
Mar 03 #Javascript
jQuery 操作option的实现代码
Mar 03 #Javascript
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
Mar 03 #Javascript
You might like
php读取纯真ip数据库使用示例
2014/01/26 PHP
PHP ignore_user_abort函数详细介绍和使用实例
2014/07/15 PHP
PHP中IP地址与整型数字互相转换详解
2014/08/20 PHP
memcache一致性hash的php实现方法
2015/03/05 PHP
PHP levenshtein()函数用法讲解
2019/03/08 PHP
JavaScript 获取用户客户端操作系统版本
2009/08/25 Javascript
JQuery 操作Javascript对象和数组的工具函数小结
2010/01/22 Javascript
基于jquery的bankInput银行卡账号格式化
2012/08/22 Javascript
利用js实现选项卡的特别效果的实例
2013/03/03 Javascript
学习JavaScript编程语言的8张思维导图分享
2015/03/27 Javascript
js控制多图左右滚动切换效果代码分享
2015/08/26 Javascript
基于javascript实现动态时钟效果
2020/08/18 Javascript
Servlet实现文件上传,可多文件上传示例
2016/12/05 Javascript
Node.js中文件操作模块File System的详细介绍
2017/01/05 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
2017/02/13 Javascript
原生JS仿QQ阅读点击展开、收起效果
2017/03/08 Javascript
AngularJS $http模块POST请求实现
2017/04/08 Javascript
jquery.pager.js分页实现详解
2019/07/29 jQuery
微信小程序向Java后台传输参数的方法实现
2020/12/10 Javascript
python实现html转ubb代码(html2ubb)
2014/07/03 Python
Python使用MD5加密字符串示例
2014/08/22 Python
在Python的Django框架中显示对象子集的方法
2015/07/21 Python
在Python中使用AOP实现Redis缓存示例
2017/07/11 Python
django框架事务处理小结【ORM 事务及raw sql,customize sql 事务处理】
2019/06/27 Python
Django 响应数据response的返回源码详解
2019/08/06 Python
Pytorch evaluation每次运行结果不同的解决
2020/01/02 Python
python实现126邮箱发送邮件
2020/05/20 Python
python 解决mysql where in 对列表(list,,array)问题
2020/06/06 Python
对python中list的五种查找方法说明
2020/07/13 Python
一款利用css3的鼠标经过动画显示详情特效的实例教程
2014/12/29 HTML / CSS
css3 实现滚动条美化效果的实例代码
2021/01/06 HTML / CSS
澳大利亚著名的纺织品品牌:Canningvale
2020/05/05 全球购物
物流专业大学应届生求职信
2013/11/03 职场文书
拓展培训心得体会
2014/01/04 职场文书
文化与传播毕业生求职信
2014/03/09 职场文书
《卧薪尝胆》读后感3篇
2019/12/26 职场文书