判断用户的在线状态 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中的循环优化
Nov 09 Javascript
纯javascript移动优先的幻灯片效果
Nov 02 Javascript
JavaScript实现多种排序算法
Feb 24 Javascript
JavaScript_object基础入门(必看篇)
Jun 13 Javascript
JavaScript兼容性总结之获取非行间样式案例
Aug 07 Javascript
详解Vue 非父子组件通信方法(非Vuex)
May 24 Javascript
微信小程序开发之toast等弹框提示使用教程
Jun 08 Javascript
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
JS中的BOM应用
Feb 02 Javascript
小程序自定义组件实现城市选择功能
Jul 18 Javascript
Vue CLI3中使用compass normalize的方法
May 30 Javascript
JS关闭子窗口并且刷新上一个窗口的实现示例
Mar 10 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
咖啡是不是喝了会上瘾?咖啡是必须品吗!
2021/03/04 新手入门
PHP赋值的内部是如何跑的详解
2019/01/13 PHP
利用javascript移动div层-javascript 拖动层
2009/03/22 Javascript
给Flash加一个超链接(推荐使用透明层)兼容主流浏览器
2013/06/09 Javascript
Javascript中call的两种用法实例
2013/12/13 Javascript
jquery删除提示框弹出是否删除对话框
2014/01/07 Javascript
从零学JSON之JSON数据结构
2014/05/19 Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
2016/06/24 Javascript
javascript实现鼠标点击页面 移动DIV
2016/12/02 Javascript
JSON字符串和JSON对象相互转化实例详解
2017/01/05 Javascript
javascript 玩转Date对象(实例讲解)
2017/07/11 Javascript
基于jQuery实现的单行公告活动轮播效果
2017/08/23 jQuery
webpack构建的详细流程探底
2018/01/08 Javascript
JS字符串去除连续或全部重复字符的实例
2018/03/08 Javascript
手把手教你如何使用nodejs编写cli命令行
2018/11/05 NodeJs
vue 地区选择器v-distpicker的常用功能
2019/07/23 Javascript
Vue调用后端java接口的实例代码
2019/10/28 Javascript
纯js实现无缝滚动功能代码实例
2020/02/21 Javascript
JS实现省市县三级下拉联动
2020/04/10 Javascript
React生命周期原理与用法踩坑笔记
2020/04/28 Javascript
vue el-tree 默认展开第一个节点的实现代码
2020/05/15 Javascript
vue-cli单页面预渲染seo-prerender-spa-plugin操作
2020/08/10 Javascript
python文件操作之目录遍历实例分析
2015/05/20 Python
numpy中的高维数组转置实例
2018/04/17 Python
python的继承知识点总结
2018/12/10 Python
用python写一个定时提醒程序的实现代码
2019/07/22 Python
python实现拼接图片
2020/03/23 Python
详解FireFox下Canvas使用图像合成绘制SVG的Bug
2019/07/10 HTML / CSS
神路信息Java面试题目
2013/03/31 面试题
Discard Protocol抛弃协议的作用是什么
2015/10/10 面试题
园林设计师自荐信
2013/11/18 职场文书
药学专业学生的自我评价分享
2014/02/06 职场文书
早会主持词
2014/03/17 职场文书
党员民主生活会对照检查材料思想汇报
2014/09/28 职场文书
python通过opencv调用摄像头操作实例分析
2021/06/07 Python
SQL实现LeetCode(175.联合两表)
2021/08/04 MySQL