判断用户的在线状态 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 相关文章推荐
javascript 兼容鼠标滚轮事件
Apr 07 Javascript
JavaScript高级程序设计 扩展--关于动态原型
Nov 09 Javascript
基于jQuery的输入框无值自动显示指定数据的实现代码
Jan 24 Javascript
js中的setInterval和setTimeout使用实例
May 09 Javascript
javascript实现日期格式转换
Dec 16 Javascript
基于jquery实现轮播特效
Apr 22 Javascript
用js实现简单算法的实例代码
Sep 24 Javascript
jQuery移除或禁用html元素点击事件常用方法小结
Feb 10 Javascript
JS实现的按钮点击颜色切换功能示例
Oct 19 Javascript
详解Angular系列之变化检测(Change Detection)
Feb 26 Javascript
vuex与组件联合使用的方法
May 10 Javascript
layui 弹出层回调获取弹出层数据的例子
Sep 02 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网站提速三大“软”招
2006/10/09 PHP
深入探讨:PHP使用数据库永久连接方式操作MySQL的是与非
2013/06/05 PHP
php多任务程序实例解析
2014/07/19 PHP
php无限极分类递归排序实现方法
2014/11/11 PHP
PHP模块化安装教程
2016/06/01 PHP
php禁用函数设置及查看方法详解
2016/07/25 PHP
php导出csv文件,可导出前导0实例代码
2016/11/16 PHP
php如何实现不借助IDE快速定位行数或者方法定义的文件和位置
2017/01/17 PHP
PHP 中魔术常量的实例详解
2017/10/26 PHP
Discuz不使用插件实现简单的打赏功能
2019/03/21 PHP
一些易混淆且不常用的属性,希望有用
2007/01/29 Javascript
拖动table标题实现改变td的大小(css+js代码)
2013/04/16 Javascript
用循环或if语句从json中取数据示例
2014/08/18 Javascript
jquery简单的弹出层浮动层代码
2015/04/27 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
2015/09/14 Javascript
jQuery模仿京东/天猫商品左侧分类导航菜单效果
2016/06/29 Javascript
jQuery实现的自动加载页面功能示例
2016/09/04 Javascript
利用js获取下拉框中所选的值
2016/12/01 Javascript
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
2017/01/20 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
2017/03/08 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
2017/06/18 Javascript
vue 页面加载进度条组件实例
2018/02/05 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
2018/10/29 Javascript
记录一次开发微信网页分享的步骤
2019/05/07 Javascript
Vuex中的Mutations的具体使用方法
2020/06/01 Javascript
JavaScript动态生成表格的示例
2020/11/02 Javascript
在Python中使用cookielib和urllib2配合PyQuery抓取网页信息
2015/04/25 Python
Python设计模式之工厂模式简单示例
2018/01/09 Python
Myprotein葡萄牙官方网站:英国优质运动营养品牌
2016/09/12 全球购物
Public Desire美国/加拿大:全球性的在线鞋类品牌
2018/12/17 全球购物
加州风格的游泳和沙滩装品牌:Cupshe
2019/06/10 全球购物
曼城官方网上商店:Manchester City
2019/09/10 全球购物
物流创业计划书
2014/02/01 职场文书
聚美优品广告词改编
2014/03/14 职场文书
公司大门门卫岗位职责
2014/06/11 职场文书
python3使用diagrams绘制架构图的步骤
2021/04/08 Python