判断用户的在线状态 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 网页黑白效果实现代码(兼容IE/FF等)
Apr 23 Javascript
js 阻止子元素响应父元素的onmouseout事件具体实现
Dec 23 Javascript
JavaScript中的getTime()方法使用详解
Jun 10 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
Jan 08 Javascript
JavaScript蒙板(model)功能的简单实现代码
Aug 04 Javascript
微信小程序 登陆流程详细介绍
Jan 17 Javascript
ES5学习教程之Array对象
Apr 01 Javascript
详解swipe使用及竖屏页面滚动方法
Jun 28 Javascript
koa-router路由参数和前端路由的结合详解
May 19 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
Sep 26 Javascript
Vue Router中应用中间件的方法
Aug 06 Javascript
解决Vue大括号字符换行踩的坑
Nov 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
php 常用字符串函数总结
2008/03/15 PHP
php处理restful请求的路由类分享
2014/02/27 PHP
30个php操作redis常用方法代码例子
2014/07/05 PHP
使用js完成节点的增删改复制等的操作
2014/01/02 Javascript
asp.net刷新本页面的六种方法总结
2014/01/07 Javascript
javascript setinterval 的正确语法如何书写
2014/06/17 Javascript
js实现遮罩层划出效果是生成div而不是显示
2014/07/29 Javascript
javascript十六进制及二进制转化的方法
2015/05/06 Javascript
angularjs学习笔记之双向数据绑定
2015/09/26 Javascript
jquery实现倒计时功能
2015/12/28 Javascript
基于javascript实现listbox左右移动
2016/01/29 Javascript
Angular实现跨域(搜索框的下拉列表)
2017/02/16 Javascript
vue项目中mock.js的使用及基本用法
2019/05/22 Javascript
vue 解决form表单提交但不跳转页面的问题
2019/10/30 Javascript
vue微信分享插件使用方法详解
2020/02/18 Javascript
Vue使用自定义指令实现拖拽行为实例分析
2020/06/06 Javascript
[01:02:25]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS VG
2014/05/25 DOTA
[01:10:58]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
[44:04]OG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python批量同步web服务器代码核心程序
2014/09/01 Python
Python正则表达式完全指南
2017/05/25 Python
python实现分页效果
2017/10/25 Python
Python之文字转图片方法
2018/05/10 Python
python opencv 实现对图像边缘扩充
2020/01/19 Python
Django中的session用法详解
2020/03/09 Python
基于CentOS搭建Python Django环境过程解析
2020/08/24 Python
CSS3制作炫酷的自定义发光文字
2016/03/28 HTML / CSS
HTML5进度条特效
2014/12/18 HTML / CSS
留学自荐信
2013/10/10 职场文书
酒店拾金不昧表扬信
2014/01/18 职场文书
《美丽的黄昏》教学反思
2014/02/28 职场文书
招股说明书范本
2014/05/06 职场文书
学生检讨书如何写
2014/10/30 职场文书
全国法制宣传日活动总结2014
2014/11/01 职场文书
2015年感恩母亲节活动方案
2015/05/04 职场文书
虚拟机linux端mysql数据库无法远程访问的解决办法
2021/05/26 MySQL