判断用户的在线状态 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 jQuery中的DOM操作
Mar 21 Javascript
xheditor与validate插件冲突的解决方案
Apr 15 Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
May 23 Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
Aug 10 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
Sep 11 Javascript
利用js获取下拉框中所选的值
Dec 01 Javascript
JS简单实现移动端日历功能示例
Dec 28 Javascript
vue.js实现请求数据的方法示例
Feb 07 Javascript
vue-router跳转页面的方法
Feb 09 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
Dec 19 Javascript
axios实现简单文件上传功能
Sep 25 Javascript
js实现的订阅发布者模式简单示例
Mar 14 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
一个显示天气预报的程序
2006/10/09 PHP
PHP中ini_set和ini_get函数的用法小结
2014/02/18 PHP
php中使用array_filter()函数过滤空数组的实现代码
2014/08/19 PHP
PHP中的流(streams)浅析
2015/07/02 PHP
PHP浮点比较大小的方法
2016/02/14 PHP
php的PDO事务处理机制实例分析
2017/02/16 PHP
PHP实现ASCII码与字符串相互转换的方法
2017/04/29 PHP
ThinkPHP3.2.3框架实现执行原生SQL语句的方法示例
2019/04/03 PHP
JQuery onload、ready概念介绍及使用方法
2013/04/27 Javascript
js动态为代码着色显示行号
2013/05/29 Javascript
JS防止用户多次提交的简单代码
2013/08/01 Javascript
node.js中的buffer.toJSON方法使用说明
2014/12/14 Javascript
浅析jQuery EasyUI中的tree使用指南
2014/12/18 Javascript
【经典源码收藏】基于jQuery的项目常见函数封装集合
2016/06/07 Javascript
Javascript实现前端简单的路由实例
2016/09/11 Javascript
移动适配的几种方案(三种方案)
2016/11/25 Javascript
bootstrap table实现点击翻页功能 可记录上下页选中的行
2017/09/28 Javascript
vue+axios新手实践实现登陆的示例代码
2018/06/06 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
2018/09/04 Javascript
vue实现鼠标移入移出事件代码实例
2019/03/27 Javascript
微信小程序调用微信支付接口的实现方法
2019/04/29 Javascript
webpack4 SplitChunks实现代码分隔详解
2019/05/23 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
2019/05/28 jQuery
微信小程序开发之map地图组件定位并手动修改位置偏差
2019/08/17 Javascript
layui table单元格事件修改值的方法
2019/09/24 Javascript
vue2.x 对象劫持的原理实现
2020/04/19 Javascript
Python实现的文本编辑器功能示例
2017/06/30 Python
Python Numpy 数组的初始化和基本操作
2018/03/13 Python
pandas DataFrame的修改方法(值、列、索引)
2019/08/02 Python
如何基于线程池提升request模块效率
2020/04/18 Python
Spartoo比利时:欧洲时尚购物网站
2017/12/06 全球购物
第二层交换机和路由器的区别?第三层交换机和路由器的区别?
2013/05/23 面试题
主管会计岗位责任制
2014/02/10 职场文书
党建示范点实施方案
2014/03/12 职场文书
【TED出品】天梯非主流开心游1700 划水骑士
2022/03/31 魔兽争霸
利用Apache Common将java对象池化的问题
2022/06/16 Servers