捕获浏览器关闭、刷新事件不同情况下的处理方法


Posted in Javascript onJune 02, 2013

在做一些关于会员在线的问题时,往往我们要根据览器是否关闭来判断用户是否下线,然后再从session和application中将此用户移除。

由于浏览器是无状态的,在这时候捕捉浏览器关闭会出现两种情况:
1.真正的关闭浏览器 (a.点击关闭按钮 b.右击任务栏关闭 c.按alt+F4关闭)
2.刷新浏览器。

那如何判断区分这两种动作呢?

一. Javascript代码处理方法:

function window.onbeforeunload() 
{ 
//用户点击浏览器右上角关闭按钮或是按alt+F4关闭 
if(event.clientX>document.body.clientWidth&&event.clientY<0||event.altKey) 
{ 
// alert("点关闭按钮"); 
document.getElementById("hiddenForm:hiddenBtn").click(); 
// window.event.returnValue="确定要退出本页吗?"; 
} 
//用户点击任务栏,右键关闭。s或是按alt+F4关闭 
else if(event.clientY > document.body.clientHeight || event.altKey) 
{ 
// alert("任务栏右击关闭"); 
document.getElementById("hiddenForm:hiddenBtn").click(); 
// window.event.returnValue="确定要退出本页吗?"; 
} 
//其他情况为刷新 
else 
{ 
// alert("刷新页面"); 
} 
}

其中 event.clientX 鼠标光标X坐标
document.body.clientWidth 窗体工作区宽度
event.clientY 鼠标光标Y坐标
event.altKey 是否按下alt键
二. 事件捕捉方法:
<body scroll="no" onbeforeunload="return CloseEvent();" onunload="UnLoadEvent()" > 
</body> 
<script language="JavaScript" type="text/javascript"> 
var DispClose = true; 
function CloseEvent() 
{ 
if (DispClose) 
{ 
return "是否离开当前页面?"; 
} 
} 
function UnLoadEvent() 
{ 
DispClose = false; 
//在这里处理关闭页面前的动作 
} 
</script>

在页面卸载之前引发onbeforeunload事件,如果用户选择“是”即确定卸载页面将引发onunload事件,否则返回页面不做任何操作。
Javascript 相关文章推荐
基于jQuery的js分页代码
Jun 10 Javascript
在标题栏显示新消息提示,很多公司项目中用到这个方法
Nov 04 Javascript
js style动态设置table高度
Oct 21 Javascript
浅谈Javascript的静态属性和原型属性
May 07 Javascript
jQuery简单实现两级下拉菜单效果代码
Sep 15 Javascript
js实现右键自定义菜单
Dec 03 Javascript
JavaScript中object和Object的区别(详解)
Feb 27 Javascript
JavaScript数据结构之二叉树的删除算法示例
Apr 13 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
May 10 Javascript
详解vue-cli3多页应用改造
Jun 04 Javascript
jQuery实现王者荣耀手风琴效果
Jan 17 jQuery
JS实现判断移动端PC端功能
Feb 21 Javascript
jQuery图片滚动图片的效果(另类实现)
Jun 02 #Javascript
JS操作select下拉框动态变动(创建/删除/获取)
Jun 02 #Javascript
jQuery实现单行文字间歇向上滚动源代码
Jun 02 #Javascript
js内存泄露的几种情况详细探讨
May 31 #Javascript
js判断鼠标同时离开两个div的思路及代码
May 31 #Javascript
Javacript实现颜色梯度变化和渐变的效果代码
May 31 #Javascript
js 输出内容到新窗口具体实现代码
May 31 #Javascript
You might like
php 常用类整理
2009/12/23 PHP
PHP在不同页面间传递Json数据示例代码
2013/06/08 PHP
ext 同步和异步示例代码
2009/09/18 Javascript
javascript根据时间生成m位随机数最大13位
2014/10/30 Javascript
BootStrap中Tab页签切换实例代码
2016/05/30 Javascript
Google 地图API Map()构造器详解
2016/08/06 Javascript
JavaScript中ES6字符串扩展方法
2016/08/26 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
2016/12/12 Javascript
vue如何从接口请求数据
2017/06/22 Javascript
详解JS模块导入导出
2017/12/20 Javascript
vue-swiper的使用教程
2018/08/30 Javascript
JavaScript文本特效实例小结【3个示例】
2018/12/22 Javascript
koa router 多文件引入的方法示例
2019/05/22 Javascript
vue2.0 实现富文本编辑器功能
2019/05/26 Javascript
在JavaScript中如何访问暂未存在的嵌套对象
2019/06/18 Javascript
vue实现图片预览组件封装与使用
2019/07/13 Javascript
JavaScript canvas实现跟随鼠标事件
2020/02/10 Javascript
Vue-cli 移动端布局和动画使用详解
2020/08/10 Javascript
Python读写docx文件的方法
2018/05/08 Python
Django 路由控制的实现
2019/07/17 Python
python numpy库linspace相同间隔采样的实现
2020/02/25 Python
python 画条形图(柱状图)实例
2020/04/24 Python
python3 循环读取excel文件并写入json操作
2020/07/14 Python
Django与AJAX实现网页动态数据显示的示例代码
2021/02/24 Python
Columbia Sportswear法国官网:全球户外品牌
2020/09/25 全球购物
应届大学生求职的自我评价
2013/11/17 职场文书
教师自荐信
2013/12/10 职场文书
会计专业导师推荐信
2014/03/08 职场文书
国培计划培训感言
2014/03/11 职场文书
售后服务承诺书模板
2014/05/21 职场文书
师德师风主题教育活动总结
2015/05/07 职场文书
食品药品安全责任书
2015/05/11 职场文书
幼儿园大班开学寄语(2016秋季)
2015/12/03 职场文书
golang 如何用反射reflect操作结构体
2021/04/28 Golang
springBoot基于webSocket实现扫码登录
2021/06/22 Java/Android
使用CSS实现音波加载效果
2023/05/07 HTML / CSS