判断用户的在线状态 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 相关文章推荐
jquery imgareaselect 使用利用js与程序结合实现图片剪切
Jul 30 Javascript
基于JQuery框架的AJAX实例代码
Nov 03 Javascript
JavaScript全局函数使用简单说明
Mar 11 Javascript
js展开闭合效果演示代码
Jul 24 Javascript
通过url查找a元素并点击
Apr 09 Javascript
js 操作符汇总
Nov 08 Javascript
javascript中的正则表达式使用详解
Aug 30 Javascript
使用jQuery加载html页面到指定的div实现方法
Jul 13 Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
Feb 20 Javascript
教你用Cordova打包Vue项目的方法
Oct 17 Javascript
JS实现DOM删除节点操作示例
Apr 04 Javascript
Node.js API详解之 Error模块用法实例分析
May 14 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 数组的创建、调用和更新实现代码
2009/03/09 PHP
php侧拉菜单 漂亮,可以向右或者向左展开,支持FF,IE
2009/10/15 PHP
解析php入库和出库
2013/06/25 PHP
PHP中判断文件存在使用is_file还是file_exists?
2015/04/03 PHP
php compact 通过变量创建数组
2016/11/15 PHP
PHP5.6新增加的可变函数参数用法分析
2017/08/25 PHP
JQUERY THICKBOX弹出层插件
2008/08/30 Javascript
JS实现当前页居中分页效果的方法
2015/06/18 Javascript
JS读写CSS样式的方法汇总
2016/08/16 Javascript
javascript实现获取图片大小及图片等比缩放的方法
2016/11/24 Javascript
走进javascript——不起眼的基础,值和分号
2017/02/24 Javascript
Vue组件实例间的直接访问实现代码
2017/08/20 Javascript
基于jQuery的表单填充实例
2017/08/22 jQuery
vue elementui form表单验证的实现
2018/11/11 Javascript
layUI实现三级导航菜单效果
2019/07/26 Javascript
详解vue页面首次加载缓慢原因及解决方案
2019/11/06 Javascript
vue实现简单学生信息管理
2020/05/30 Javascript
[00:35]DOTA2上海特级锦标赛 EG战队宣传片
2016/03/04 DOTA
python爬取w3shcool的JQuery课程并且保存到本地
2017/04/06 Python
Python编程实现微信企业号文本消息推送功能示例
2017/08/21 Python
Python实现的归并排序算法示例
2017/11/21 Python
Python cookbook(数据结构与算法)让字典保持有序的方法
2018/02/18 Python
使用matplotlib的pyplot模块绘图的实现示例
2020/07/12 Python
Pycharm自动添加文件头注释和函数注释参数的方法
2020/10/23 Python
Optimalprint加拿大:在线打印服务
2020/04/03 全球购物
以下的初始化有什么区别
2013/12/16 面试题
电子商务专业个人的自我评价分享
2013/10/29 职场文书
医务人员竞聘职务自我评价分享
2013/11/08 职场文书
优秀求职自荐信怎样写
2013/12/18 职场文书
学生宿舍管理制度
2014/01/30 职场文书
党员个人整改措施
2014/10/24 职场文书
颐和园英文导游词
2015/01/30 职场文书
2016小学优秀教师先进事迹材料
2016/02/26 职场文书
幼儿园教师辞职信
2019/06/21 职场文书
vue实现省市区联动 element-china-area-data插件
2022/04/22 Vue.js
python如何利用cv2.rectangle()绘制矩形框
2022/12/24 Python