判断用户的在线状态 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 相关文章推荐
js中的escape及unescape函数的php实现代码
Sep 04 Javascript
javascript之可拖动的iframe效果代码
Aug 01 Javascript
一些Javascript的IE和Firefox(火狐)兼容性的问题总结及常用例子
May 21 Javascript
各浏览器中querySelector和querySelectorAll的实现差异分析
May 23 Javascript
JS调用页面表格导出excel示例代码
Mar 18 Javascript
JavaScript继承模式粗探
Jan 12 Javascript
AngularJS中$http服务常用的应用及参数
Aug 22 Javascript
VUE页面中加载外部HTML的示例代码
Sep 20 Javascript
分析javascript原型及原型链
Mar 18 Javascript
vue2中使用less简易教程
Mar 27 Javascript
vue+element tabs选项卡分页效果
Jun 29 Javascript
addEventListener()和removeEventListener()追加事件和删除追加事件
Dec 04 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
分页显示Oracle数据库记录的类之二
2006/10/09 PHP
php下关于中英数字混排的字符串分割问题
2010/04/06 PHP
解析thinkphp中的M()与D()方法的区别
2013/06/22 PHP
weiphp微信公众平台授权设置
2016/01/04 PHP
PHP的Yii框架中行为的定义与绑定方法讲解
2016/03/18 PHP
PHP实现的随机IP函数【国内IP段】
2016/07/20 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
javascript 全角转换实现代码
2009/07/17 Javascript
javascript 类型判断代码分析
2010/03/28 Javascript
Web 前端设计模式--Dom重构 提高显示性能
2010/10/22 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
2015/03/10 Javascript
基于jquery实现简单的分页控件
2016/03/17 Javascript
JavaScript中最常见的三个面试题解析
2017/03/04 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
2018/09/30 Javascript
Vue 进阶之路(三)
2019/04/18 Javascript
轻松解决JavaScript定时器越走越快的问题
2019/05/13 Javascript
JavaScript this在函数中的指向及实例详解
2019/10/14 Javascript
Python中dictionary items()系列函数的用法实例
2014/08/21 Python
Python做简单的字符串匹配详解
2017/03/21 Python
Python正则表达式非贪婪、多行匹配功能示例
2017/08/08 Python
PyQt5 界面显示无响应的实现
2020/03/26 Python
基于HTML5 audio元素播放声音jQuery小插件
2011/05/11 HTML / CSS
世界上最大的巴士旅游观光公司:Big Bus Tours
2016/10/20 全球购物
毕业生多媒体设计求职信
2013/10/12 职场文书
读书演讲主持词
2014/03/18 职场文书
农村葬礼主持词
2014/03/31 职场文书
酒店管理求职信
2014/06/09 职场文书
无子女夫妻离婚协议书(4篇)
2014/10/20 职场文书
优秀党员申报材料
2014/12/18 职场文书
计划生育责任书
2015/05/09 职场文书
食堂卫生管理制度
2015/08/04 职场文书
幼儿园科学课教学反思
2016/03/03 职场文书
2016年小学植树节活动总结
2016/03/16 职场文书
2016年保险公众宣传日活动总结
2016/04/05 职场文书
入党心得体会
2019/06/20 职场文书
灵能百分百第三季什么时候来?
2022/03/15 日漫