判断用户的在线状态 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 按钮点击触发(兼容IE、火狐)
Aug 07 Javascript
web前端开发JQuery常用实例代码片段(50个)
Aug 28 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
Oct 12 Javascript
JavaScript lodash常见用法系列小结
Aug 24 Javascript
JavaScript 继承详解(五)
Oct 11 Javascript
详解vue2路由vue-router配置(懒加载)
Apr 08 Javascript
bootstrap响应式工具使用详解
Nov 29 Javascript
Vue的事件响应式进度条组件实例详解
Feb 04 Javascript
vue+springmvc导出excel数据的实现代码
Jun 27 Javascript
JS实现的排列组合算法示例
Jul 16 Javascript
three.js显示中文字体与tween应用详析
Jan 04 Javascript
JavaScript canvas实现跟随鼠标移动小球
Feb 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 超链接 抓取实现代码
2009/06/29 PHP
php去掉文件前几行的方法
2015/07/29 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
php 实现银联商务H5支付的示例代码
2019/10/12 PHP
网站被黑的假象--ARP欺骗之页面中加入一段js
2007/05/16 Javascript
帮助避免错误的Javascript陷阱清单
2009/05/31 Javascript
XHTML下,JS浮动代码失效的问题
2009/11/12 Javascript
node.js中的fs.fstatSync方法使用说明
2014/12/15 Javascript
js实现简单折叠、展开菜单的方法
2015/08/28 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
2015/12/29 Javascript
AngularJS基础 ng-keyup 指令简单示例
2016/08/02 Javascript
js 上传文件预览的简单实例
2016/08/16 Javascript
React如何将组件渲染到指定DOM节点详解
2017/09/08 Javascript
javascript中神奇的 Date对象小结
2017/10/12 Javascript
浅谈Vue Element中Select下拉框选取值的问题
2018/03/01 Javascript
微信用户访问小程序的登录过程详解
2019/09/20 Javascript
vue实现移动端省市区选择
2019/09/27 Javascript
python采集博客中上传的QQ截图文件
2014/07/18 Python
Python实现信用卡系统(支持购物、转账、存取钱)
2016/06/24 Python
Django视图和URL配置详解
2018/01/31 Python
python使用zip将list转为json的方法
2018/12/31 Python
python实现简单成绩录入系统
2019/09/19 Python
Python制作简易版小工具之计算天数的实现思路
2020/02/13 Python
浅谈pytorch 模型 .pt, .pth, .pkl的区别及模型保存方式
2020/05/25 Python
基于tensorflow for循环 while循环案例
2020/06/30 Python
浅谈matplotlib 绘制梯度下降求解过程
2020/07/12 Python
如何使用scrapy中的ItemLoader提取数据
2020/09/30 Python
Python使用Opencv实现边缘检测以及轮廓检测的实现
2020/12/31 Python
Saks Fifth Avenue澳洲/亚太地区:萨克斯第五大道精品百货店
2019/06/09 全球购物
网站编辑求职信
2013/10/17 职场文书
学生手册评语
2014/05/05 职场文书
2016幼儿园新学期寄语
2015/12/03 职场文书
2019生态环境保护倡议书!
2019/07/03 职场文书
Nginx优化服务之网页压缩的实现方法
2021/03/31 Servers
MySQL infobright的安装步骤
2021/04/07 MySQL
教你使用RustDesk 搭建一个自己的远程桌面中继服务器
2022/08/14 Servers