捕获浏览器关闭、刷新事件不同情况下的处理方法
发布时间:2024-09-09 20:05:17
标签:浏览器,关闭,刷新
在做一些关于会员在线的问题时,往往我们要根据览器是否关闭来判断用户是否下线,然后再从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事件,否则返回页面不做任何操作。


猜你喜欢
- 本文实例讲述了python实现一次创建多级目录的方法。分享给大家供大家参考。具体实现方法如下:import osos.makedirs( &
- 这几天刚刚做了这个东西,有网友问到,所以分享一下。ie6、firefox2 通过,麻烦有ie7的网友测试一下,由于有其他代码,剖析出来麻烦,
- 接触了Vue模块化开发才发现JavaScript组件化开发的演变一直在继续,以前也没有特别在意这一块内容,写着代码能调试运行不报错就可以了,
- Docker 是一个开源项目,为开发人员和系统管理员提供了一个开放平台,可以将应用程序构建、打包为一个轻量级容器,并在任何地方运行。Dock
- 本文实例为大家分享了python爬虫爬取淘宝商品的具体代码,供大家参考,具体内容如下1、需求目标 : 进去淘宝页面,搜索耐克关键词,抓取 商
- 在SQL Server 2005中,它的另外一个强大的新特点是数据库快照。数据库快照是一个数据库的只读副本,它是数据库所有数据的映射,由快照
- 前言之前实践了下face++在线人脸识别版本,这回做一下离线版本。github 上面有关于face_recognition的相关资料,本人只
- question: Django中对数据库的调用非常的隐蔽,在各种复杂的模块互相拼接继承中很难发现获取数据库内容的部分来,开始试图理解一下下
- Python 中的 main 函数充当程序的执行点,在 Python 编程中定义 main 函数是启
- 我们在微博上可以对图片进行向左转向右转等旋转操作,让用户可以从不同的视角欣赏图片效果。本文将结合实例为您讲解如何使用Javascript结合
- 前言看文档不认真,开发也没有多注意,总是hack。忽悠忽悠就过去,但怎么说,歪门邪道还是不太好,现在就亡羊补牢,总结总结。数组索引使用下标更
- 数字列表和其他列表类似,但是有一些函数可以使数字列表的操作更高效。我们创建一个包含10个数字的列表,看看能做哪些工作吧。# Print ou
- 1、查找重复记录 ①如果只是不想在查询结果中存在重复记录, 可以加Distinct select distinct * from TestT
- ThinkPHP CURD方法的limit方法也是模型类的连贯操作方法之一,主要用于指定查询和操作的数量,特别在分页查询的时候使用较多。并且
- 爬虫中scrapy.Request的更多参数scrapy.Request的参数scrapy.Request(url[,callback,me
- php统计数组元素个数count():对数组中的元素个数进行统计;sizeof():和count()具有同样的用途,这两个函数都可以返回数组
- 一、注册自定义指令以下实例都是实现一个输入框自动获取焦点的自定义指令。1.1、全局自定义指令在vue2中,全局自定义指令通过 directi
- python中的数字类型工具python中为更高级的工作提供很多高级数字编程支持和对象,其中数字类型的完整工具包括:1.整数与浮点型,2.复
- 有一个群友在群里问个如何快速搭建一个搜索引擎,在搜索之后我看到了这个代码所在Git:https://github.com/asciimoo/
- Pandas 中的resample函数用于各种频率的转换工作。resample的参数如下:参数描述freq转换频率axis=0重采样的轴cl