判断用户的在线状态 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汉字转拼音实现代码
Feb 06 Javascript
JavaScript遍历table表格中的某行某列并打印其值
Jul 08 Javascript
JavaScript拆分字符串时产生空字符的解决方案
Sep 26 Javascript
详细解密jsonp跨域请求
Apr 15 Javascript
js实现点击链接后延迟3秒再跳转的方法
Jun 05 Javascript
JS实现消息来时让网页标题闪动效果的方法
Apr 20 Javascript
用原生JS实现简单的多选框功能
Jun 12 Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
Aug 30 Javascript
微信小程序实现的canvas合成图片功能示例
May 03 Javascript
vue在响应头response中获取自定义headers操作
Jul 24 Javascript
原生JavaScript实现刮刮乐
Sep 29 Javascript
JavaScript实现弹出窗口效果
Dec 09 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
深入Nginx + PHP 缓存详解
2013/07/11 PHP
PHP小技巧之函数重载
2014/06/02 PHP
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
2007/08/15 Javascript
基于Jquery的简单图片切换效果
2011/01/06 Javascript
jquery属性过滤选择器使用示例
2013/06/18 Javascript
js调用iframe实现打印页面内容的方法
2014/03/04 Javascript
jQuery过滤选择器用法分析
2015/02/10 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
2015/04/06 Javascript
jQuery中 prop() attr()使用详解
2015/05/19 Javascript
JavaScript必知必会(五) eval 的使用
2016/06/08 Javascript
基于Vue.js实现数字拼图游戏
2016/08/02 Javascript
js获取文件里面的所有文件名(实例)
2017/10/17 Javascript
angular中如何绑定iframe中src的方法
2019/02/01 Javascript
Vue中Table组件Select的勾选和取消勾选事件详解
2019/03/19 Javascript
JS面向对象编程——ES6 中class的继承用法详解
2020/03/03 Javascript
JavaScript 类的封装操作示例详解
2020/05/16 Javascript
利用node.js开发cli的完整步骤
2020/12/29 Javascript
[03:32]2014DOTA2西雅图邀请赛 CIS外卡赛赛前black专访
2014/07/09 DOTA
python 第三方库的安装及pip的使用详解
2017/05/11 Python
python字符串与url编码的转换实例
2018/05/10 Python
python-itchat 获取微信群用户信息的实例
2019/02/21 Python
python通过SSH登陆linux并操作的实现
2019/10/10 Python
python实现自动清理重复文件
2020/08/24 Python
美国体育用品商店:Academy Sports + Outdoors
2020/01/04 全球购物
建筑工程技术应届生自荐信
2013/09/27 职场文书
元旦晚会感言
2014/03/12 职场文书
绘画专业自荐信
2014/07/04 职场文书
踏青活动策划方案
2014/08/19 职场文书
甘南现象心得体会
2014/09/11 职场文书
2014年度个人工作总结范文
2015/03/09 职场文书
在酒桌上的敬酒词
2015/08/12 职场文书
python使用matplotlib绘制图片时x轴的刻度处理
2021/08/30 Python
C#连接ORACLE出现乱码问题的解决方法
2021/10/05 Oracle
阿里云k8s服务升级时502错误 springboot项目应用
2022/04/09 Servers
Golang获取List列表元素的四种方式
2022/04/20 Golang
在windows server 2012 r2中安装mysql的详细步骤
2022/07/23 Servers