判断用户的在线状态 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来定位
Feb 20 Javascript
弹出广告特效(一个IP只弹出一次)的代码
Jul 27 Javascript
9个javascript语法高亮插件 推荐
Jul 18 Javascript
Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
Apr 11 Javascript
Javascript 运动中Offset的bug解决方案
Dec 24 Javascript
JavaScript包装对象使用详解
Jul 09 Javascript
js图片轮播效果实现代码
Apr 18 Javascript
JS提交form表单实例分析
Dec 10 Javascript
jQuery添加options点击事件并传值实例代码
May 18 Javascript
bootstrap中使用google prettify让代码高亮的方法
Oct 21 Javascript
Bootstrap datepicker日期选择器插件使用详解
Jul 26 Javascript
layui table 获取分页 limit的方法
Sep 20 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
IIS6.0 开启Gzip方法及PHP Gzip函数分享
2014/06/08 PHP
destoon实现调用当前栏目分类及子分类和三级分类的方法
2014/08/21 PHP
php 自定义错误日志实例详解
2016/11/12 PHP
PHP实现腾讯与百度坐标转换
2017/08/05 PHP
PHP实现Snowflake生成分布式唯一ID的方法示例
2020/08/30 PHP
js判断生效时间不得大于失效时间的思路及代码
2013/04/23 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
2014/09/15 Javascript
基于JavaScript实现通用tab选项卡(通用性强)
2016/01/07 Javascript
Bootstrap每天必学之附加导航(Affix)插件
2016/04/25 Javascript
js实现简易垂直滚动条
2017/02/22 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
2017/03/09 Javascript
jQuery+ajax实现局部刷新的两种方法
2017/06/08 jQuery
详解基于Vue+Koa的pm2配置
2017/10/24 Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
2017/12/29 Javascript
Javascript实现动态时钟效果
2018/11/17 Javascript
Vue起步(无cli)的啊教程详解
2019/04/11 Javascript
解决使用layui对select append元素无效或者未及时更新的问题
2019/09/18 Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
2020/07/20 Javascript
vue 如何从单页应用改造成多页应用
2020/10/23 Javascript
Element-UI 使用el-row 分栏布局的教程
2020/10/26 Javascript
Flask框架中密码的加盐哈希加密和验证功能的用法详解
2016/06/07 Python
python中快速进行多个字符替换的方法小结
2016/12/15 Python
python实现上传下载文件功能
2020/11/19 Python
Python3爬虫学习之爬虫利器Beautiful Soup用法分析
2018/12/12 Python
Django中celery执行任务结果的保存方法
2019/07/12 Python
Tensorflow训练模型越来越慢的2种解决方案
2020/02/07 Python
Python交互环境下打印和输入函数的实例内容
2020/02/16 Python
django项目中使用云片网发送短信验证码的实现
2021/01/19 Python
Clarks英国官方网站:全球领军鞋履品牌
2016/11/26 全球购物
Street One瑞士:德国现代时装公司
2019/10/09 全球购物
建筑毕业生自我鉴定
2013/10/18 职场文书
物理教学随笔感言
2014/02/22 职场文书
教师对照四风自我剖析材料
2014/09/30 职场文书
营业员岗位职责范本
2015/04/14 职场文书
Java服务调用RestTemplate与HttpClient的使用详解
2022/06/21 Java/Android