判断用户的在线状态 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数据缓存系统实现代码
Oct 24 Javascript
20个非常棒的 jQuery 幻灯片插件和教程分享
Aug 23 Javascript
JavaScript中json使用自己总结
Aug 13 Javascript
jquery列表拖动排列(由项目提取相当好用)
Jun 17 Javascript
javascript新闻跑马灯实例代码
Jul 29 Javascript
JavaScript弹窗基础篇
Apr 27 Javascript
浅谈JavaScript的函数及作用域
Dec 30 Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
Jan 19 Javascript
Webpack实现按需打包Lodash的几种方法详解
May 08 Javascript
vue.js实现格式化时间并每秒更新显示功能示例
Jul 07 Javascript
微信小程序使用map组件实现路线规划功能示例
Jan 22 Javascript
javascript实现数字时钟效果
Feb 06 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 Curl多线程原理实例详解
2013/11/06 PHP
php实现获取及设置用户访问页面语言类
2014/09/24 PHP
跟我学Laravel之安装Laravel
2014/10/15 PHP
php中smarty区域循环的方法
2015/06/11 PHP
JS中style属性
2006/10/11 Javascript
AlertBox 弹出层信息提示框效果实现步骤
2010/10/11 Javascript
基于jquery的动态创建表格的插件
2011/04/05 Javascript
JavaScript 产生不重复的随机数三种实现思路
2012/12/13 Javascript
JavaScript 盒模型 尺寸深入理解
2012/12/31 Javascript
JavaScript中的关键字&quot;VAR&quot;使用详解 分享
2013/07/31 Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
2013/09/06 Javascript
jquery showModelDialog的使用方法示例详解
2013/11/19 Javascript
收集json解析的四种方法分享
2014/01/17 Javascript
类似天猫商品详情随浏览器移动的示例代码
2014/02/27 Javascript
深入分析jquery解析json数据
2014/12/09 Javascript
javascript获取wx.config内部字段解决微信分享
2016/03/09 Javascript
js Canvas绘制圆形时钟教程
2017/02/06 Javascript
Javascript中的作用域及块级作用域
2017/12/08 Javascript
vue的mixins属性详解
2018/03/14 Javascript
jQuery中的for循环var与let的区别
2018/04/21 jQuery
Javascript获取某个月的天数
2018/05/30 Javascript
微信小程序解析富文本过程详解
2019/07/13 Javascript
node.js文件的复制、创建文件夹等相关操作
2021/02/05 Javascript
python排序方法实例分析
2015/04/30 Python
Python抓取百度查询结果的方法
2015/07/08 Python
Python语言描述最大连续子序列和
2017/12/05 Python
python复制列表时[:]和[::]之间有什么区别
2018/10/16 Python
python3的数据类型及数据类型转换实例详解
2019/08/20 Python
Python制作运行进度条的实现效果(代码运行不无聊)
2021/02/24 Python
中考标语大全
2014/06/05 职场文书
介绍信格式
2015/01/30 职场文书
民事起诉状范文
2015/05/19 职场文书
php TP5框架生成二维码链接
2021/04/01 PHP
python3 sqlite3限制条件查询的操作
2021/04/07 Python
Spring Security中用JWT退出登录时遇到的坑
2021/10/16 Java/Android
Windows Server 2008配置防火墙策略详解
2022/06/28 Servers