判断用户的在线状态 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 相关文章推荐
Firefox中使用outerHTML的2种解决方法
Jun 07 Javascript
jQuery实现限制textarea文本框输入字符数量的方法
May 28 Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
May 22 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
Oct 26 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
Sep 13 Javascript
jQuery轻量级表单模型验证插件
Oct 15 jQuery
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
Mar 11 Javascript
详解如何更好的使用module vuex
Mar 27 Javascript
node创建Vue项目步骤详解
Mar 06 Javascript
js this 绑定机制深入详解
Apr 30 Javascript
详解JavaScript之ES5的继承
Jul 08 Javascript
详解Vue的options
May 15 Vue.js
在多个页面使用同一个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
《APMServ 5.1.2》使用图解
2006/10/23 PHP
php多线程实现方法及用法实例详解
2015/10/26 PHP
PHP面相对象中的重载与重写
2017/02/13 PHP
PHP的自定义模板引擎
2017/03/24 PHP
PHP如何根据文件头检测文件类型实例代码
2018/10/14 PHP
php微信公众号开发之校园图书馆
2018/10/20 PHP
javascript 导出数据到Excel(处理table中的元素)
2009/12/18 Javascript
js+css实现的简单易用兼容好的分页
2013/12/30 Javascript
javascript事件委托的方式绑定详解
2015/06/10 Javascript
javascript日期计算实例分析
2015/06/29 Javascript
JavaScript函数节流概念与用法实例详解
2016/06/20 Javascript
a标签置灰不可点击的实现方法
2017/02/06 Javascript
jQuery实现级联下拉框实战(5)
2017/02/08 Javascript
js实现放大镜特效
2017/05/18 Javascript
JavaScript实现滑动导航栏效果
2017/08/30 Javascript
vue实现的上传图片到数据库并显示到页面功能示例
2018/03/17 Javascript
通过一次报错详细谈谈Point事件
2018/05/17 Javascript
微信小程序模板template简单用法示例
2018/12/04 Javascript
vue实现Excel文件的上传与下载功能的两种方式
2019/06/28 Javascript
微信小程序实现二维码签到考勤系统
2020/01/16 Javascript
Vue自定义多选组件使用详解
2020/09/08 Javascript
[47:10]完美世界DOTA2联赛PWL S3 LBZS vs Rebirth 第二场 12.16
2020/12/18 DOTA
python多维数组切片方法
2018/04/13 Python
python os用法总结
2018/06/08 Python
Python的iOS自动化打包实例代码
2018/11/22 Python
Python爬虫 bilibili视频弹幕提取过程详解
2019/07/31 Python
Python批量启动多线程代码实例
2020/02/18 Python
python抢购软件/插件/脚本附完整源码
2021/03/04 Python
HTML5利用约束验证API来检查表单的输入数据的代码实例
2016/12/20 HTML / CSS
印度最大的旅游网站:MakeMyTrip
2016/10/05 全球购物
建筑设计学生的自我评价
2014/01/16 职场文书
学生会干部自荐信
2014/02/04 职场文书
2014年3.15团委活动总结
2014/03/16 职场文书
群众路线教育实践活动实施方案
2014/10/31 职场文书
公安忠诚教育心得体会
2016/01/23 职场文书
python控制台打印log输出重复的解决方法
2021/05/14 Python