判断用户的在线状态 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从头学起第三讲
Jul 06 Javascript
Jquery实现三层遍历删除功能代码
Apr 23 Javascript
JS代码判断IE6,IE7,IE8,IE9的函数代码
Aug 02 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
Jul 03 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
Aug 21 Javascript
13个PHP函数超实用
Oct 21 Javascript
Angularjs 创建可复用组件实例代码
Oct 09 Javascript
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
Sep 20 Javascript
Vue+webpack+Element 兼容问题总结(小结)
Aug 16 Javascript
使用post方法实现json往返传输数据的方法
Mar 30 Javascript
JavaScript面向对象核心知识与概念归纳整理
May 09 Javascript
Antd的table组件表格的序号自增操作
Oct 27 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
substr()函数中文版
2006/10/09 PHP
php addslashes 函数详细分析说明
2009/06/23 PHP
屏蔽机器人从你的网站搜取email地址的php代码
2012/11/14 PHP
分享五个PHP7性能优化提升技巧
2015/12/07 PHP
PHP中的访问修饰符简单比较
2019/02/02 PHP
判断JavaScript对象是否可用的最正确方法分析
2008/10/03 Javascript
jquery 操作DOM的基本用法分享
2012/04/05 Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
2016/05/15 Javascript
jquery常用的12个小功能
2016/07/22 Javascript
Vue.js仿Metronic高级表格(一)静态设计
2017/04/17 Javascript
JavaScript之面向对象_动力节点Java学院整理
2017/06/29 Javascript
Textarea输入字数限制实例(兼容iOS&amp;安卓)
2017/07/06 Javascript
vue.js响应式原理解析与实现
2020/06/22 Javascript
vue-cli 2.*中导入公共less文件的方法步骤
2018/11/22 Javascript
JS监听组合按键思路及实现过程
2020/04/17 Javascript
webpack+vue.js构建前端工程化的详细教程
2020/05/10 Javascript
Element Cascader 级联选择器的使用示例
2020/07/27 Javascript
python去除文件中空格、Tab及回车的方法
2016/04/12 Python
利用Python实现颜色色值转换的小工具
2016/10/27 Python
python os.listdir按文件存取时间顺序列出目录的实例
2018/10/21 Python
基于python实现的百度新歌榜、热歌榜下载器(附代码)
2019/08/05 Python
解决pytorch报错:AssertionError: Invalid device id的问题
2020/01/10 Python
Django 博客实现简单的全文搜索的示例代码
2020/02/17 Python
PyTorch中model.zero_grad()和optimizer.zero_grad()用法
2020/06/24 Python
英国灯具和灯泡网上商店:Lights.co.uk
2018/02/02 全球购物
嘻哈珠宝品牌:KRKC&CO
2020/10/19 全球购物
留学自荐信的技巧
2013/10/17 职场文书
七年级英语教学反思
2014/01/15 职场文书
小学数学课后反思
2014/04/23 职场文书
大学生通用个人自我评价
2014/04/27 职场文书
2014年酒店年度工作总结
2014/12/10 职场文书
党支部季度考核意见
2015/06/02 职场文书
关于教师节的广播稿
2015/08/19 职场文书
《角的初步认识》教学反思
2016/02/17 职场文书
浅谈MySQL user权限表
2021/06/18 MySQL
vue ref如何获取子组件属性值
2022/03/31 Vue.js