判断用户的在线状态 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 刷新页面的代码小结 推荐
Apr 02 Javascript
关于firefox的ElementTraversal 接口 使用说明
Nov 11 Javascript
js前台判断开始时间是否小于结束时间
Feb 23 Javascript
可以用鼠标拖动的DIV实现思路及代码
Oct 21 Javascript
推荐8款jQuery轻量级树形Tree插件
Nov 12 Javascript
深入浅析JavaScript面向对象和原型函数
Feb 06 Javascript
BootStrap和jQuery相结合实现可编辑表格
Apr 21 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
May 10 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
Jun 02 Javascript
基于模板引擎Jade的应用(详解)
Dec 12 Javascript
javascript面向对象三大特征之封装实例详解
Jul 24 Javascript
JS如何定义用字符串拼接的变量
Jul 11 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 include的妙用,实现路径加密
2008/07/29 PHP
PHP 批量更新网页内容实现代码
2010/01/05 PHP
php skymvc 一款轻量、简单的php
2011/06/28 PHP
CodeIgniter错误mysql_connect(): No such file or directory解决方法
2014/09/06 PHP
php计算两个文件相对路径的方法
2015/03/14 PHP
PHP单例模式与工厂模式详解
2017/08/29 PHP
详解PHP 7.4 中数组延展操作符语法知识点
2019/07/19 PHP
javascript Demo模态窗口
2009/12/06 Javascript
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
2010/12/11 Javascript
浅谈javascript对象模型和function对象
2014/12/26 Javascript
浅谈Javascript Base64 加密解密
2014/12/28 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
2016/05/17 Javascript
jQuery3.0中的buildFragment私有函数详解
2016/08/16 Javascript
javascript之IE版本检测超简单方法
2016/08/20 Javascript
JavaScript中this的用法及this在不同应用场景的作用解析
2017/04/13 Javascript
详解nodeJS之路径PATH模块
2017/05/31 NodeJs
JavaScript之RegExp_动力节点Java学院整理
2017/06/29 Javascript
详解vue.js移动端导航navigationbar的封装
2017/07/05 Javascript
vue2 v-model/v-text 中使用过滤器的方法示例
2019/05/09 Javascript
Python实现获取域名所用服务器的真实IP
2015/10/25 Python
python利用rsa库做公钥解密的方法教程
2017/12/10 Python
用python简单实现mysql数据同步到ElasticSearch的教程
2018/05/30 Python
Python 函数返回值的示例代码
2019/03/11 Python
详解Python装饰器
2019/03/25 Python
python+numpy按行求一个二维数组的最大值方法
2019/07/09 Python
django 中的聚合函数,分组函数,F 查询,Q查询
2019/07/25 Python
html特殊符号示例 html特殊字符编码对照表
2014/01/14 HTML / CSS
《记承天寺夜游》教学反思
2014/02/16 职场文书
申论倡议书范文
2014/05/13 职场文书
纪检监察建议书
2014/05/19 职场文书
财务管理专业自荐书
2014/09/02 职场文书
公司承诺函范文
2015/01/21 职场文书
2016年世界艾滋病日宣传活动总结
2016/04/01 职场文书
深入理解java.lang.String类的不可变性
2021/06/27 Java/Android
Java 超详细讲解设计模式之中的抽象工厂模式
2022/03/25 Java/Android
Axios代理配置及封装响应拦截处理方式
2022/04/07 Vue.js