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


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 相关文章推荐
在textarea中显示html页面的javascript代码
Apr 20 Javascript
JavaScript 基础篇之对象、数组使用介绍(三)
Apr 07 Javascript
随鼠标上下滚动的jquery代码
Dec 05 Javascript
jquery解析JSON数据示例代码
Mar 17 Javascript
javascript实现检验的各种规则
Jul 31 Javascript
javascript实现表单验证
Jan 29 Javascript
BootStrap的JS插件之轮播效果案例详解
May 16 Javascript
ReactJs实现树形结构的数据显示的组件的示例
Aug 18 Javascript
详解JavaScript中typeof与instanceof用法
Oct 24 Javascript
Vue Router的手写实现方法实现
Mar 02 Javascript
Node.js API详解之 V8模块用法实例分析
Jun 05 Javascript
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 Vue.js
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设计模式 Decorator(装饰模式)
2011/06/26 PHP
用PHP实现小写金额转换大写金额的代码(精确到分)
2012/01/10 PHP
php中使用exec,system等函数调用系统命令的方法(不建议使用,可导致安全问题)
2012/09/07 PHP
php去除头尾空格的2种方法
2015/03/16 PHP
利用php的ob缓存机制实现页面静态化方法
2017/07/09 PHP
Ext 表单布局实例代码
2009/04/30 Javascript
多浏览器支持的右下角浮动窗口
2010/04/01 Javascript
Jquery Validate 正则表达式实用验证代码大全
2013/08/23 Javascript
jquery控制display属性为none或block
2014/03/31 Javascript
跟我学Nodejs(二)--- Node.js事件模块
2014/05/21 NodeJs
在Google 地图上实现做的标记相连接
2015/01/05 Javascript
jQuery子窗体取得父窗体元素的方法
2015/05/11 Javascript
js实现全国省份城市级联下拉菜单效果代码
2015/09/07 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
2016/05/12 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
2016/10/24 Javascript
浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)
2017/02/08 Javascript
详解Vue2.x-directive的学习笔记
2017/07/17 Javascript
swiper移动端轮播插件(触碰图片之后停止轮播)
2017/12/28 Javascript
基于js中的存储键值对以及注意事项介绍
2018/03/30 Javascript
Vue 实现输入框新增搜索历史记录功能
2019/10/15 Javascript
Vue常用的全选/反选的示例代码
2020/02/19 Javascript
vue离开当前页面触发的函数代码
2020/09/01 Javascript
Flask入门教程实例:搭建一个静态博客
2015/03/27 Python
使用Python的Tornado框架实现一个一对一聊天的程序
2015/04/25 Python
Python协程 yield与协程greenlet简单用法示例
2019/11/22 Python
CSS3教程(1):什么是CSS3
2009/04/02 HTML / CSS
canvas探照灯效果的示例代码
2018/11/30 HTML / CSS
跟单文员的岗位职责
2013/11/14 职场文书
用人单位终止解除劳动合同证明书
2014/10/06 职场文书
2014年机关作风建设工作总结
2014/10/23 职场文书
个人贷款收入证明
2014/10/26 职场文书
单位接收函范文
2015/01/30 职场文书
中学教师个人总结
2015/02/10 职场文书
幼师辞职信范文
2015/02/27 职场文书
史上最牛辞职信
2015/05/13 职场文书
2015年度工程师评职称工作总结
2015/10/14 职场文书