js 监听浏览器刷新还是关闭事件
// $(window).bind('beforeunload',function(){return '您输入的内容尚未保存,确定离开此页面吗?';}); // window.onbeforeunload = function() { return "确定离开此页面吗?"; }; // function myFunction() {return "自定义内容";} // window.onbeforeunload = function(event) {event.returnValue = "确定离开此页面吗?";}
页面加载时只执行onload
页面关闭时只执行onunload
页面刷新时先执行onbeforeunload,然后onunload,最后onload。
经过验证我得出的结论是:
//对于ie,谷歌,360:
//页面加载时只执行onload
//页面刷新时,刷新之前执行onbeforeunload事件,在新页面即将替换旧页面时onunload事件,最后onload事件。
//页面关闭时,先onbeforeunload事件,再onunload事件。
//对于火狐:
//页面刷新时,只执行onunload;页面关闭时,只执行onbeforeunload事件
那么回归正题,到底怎样判断浏览器是关闭还是刷新?我按照网上的各种说法实验千百遍,都未成功,其中各种说法如下:
window.onbeforeunload = function() //author: meizz{ var n = window.event.screenX - window.screenLeft;var b = n > document.documentElement.scrollWidth-20;if(b && window.event.clientY < 0 || window.event.altKey){alert("是关闭而非刷新");window.event.returnValue = ""; //这里可以放置你想做的操作代码 }else{alert("是刷新而非关闭");} }window.onbeforeunload = function() //author: meizz{ var n = window.event.screenX - window.screenLeft;var b = n > document.documentElement.scrollWidth-20;if(b && window.event.clientY < 0 || window.event.altKey){alert("是关闭而非刷新");window.event.returnValue = ""; //这里可以放置你想做的操作代码 }else{alert("是刷新而非关闭");} } 和 functionCloseOpen(event) {if(event.clientX<=0 && event.clientY<0) {alert("关闭");} else {alert("刷新或离开");}} </script> <body οnunlοad="CloseOpen(event)"> 这些方法都不管用,但是我并没有放弃,想啊想啊........
按照上面我得出结论,
//对于ie,谷歌,360:
//页面加载时只执行onload
//页面刷新时,刷新之前执行onbeforeunload事件,在新页面即将替换旧页面时onunload事件,最后onload事件。
//页面关闭时,先onbeforeunload事件,再onunload事件。
//对于火狐:
//页面刷新时,只执行onunload;页面关闭时,只执行onbeforeunload事件
刷新的时候先onbeforeunload,然后取服务端请求数据,在新页面即将替换旧页面时onunload事件,而页面关闭时,先onbeforeunload事件,再立即onunload事件。那么在刷新的时候,onbeforeunload与onunload之间的时间肯定比关闭的时候时间长,经过测试确实如此。
贴出我的测试代码:
var_beforeUnload_time = 0, _gap_time = 0; varis_fireFox = navigator.userAgent.indexOf("Firefox")>-1;//是否是火狐浏览器 window.onunload =function (){_gap_time =new Date().getTime() - _beforeUnload_time;if(_gap_time <= 5)$.post(pathName+"/back/bi!aaaa.s2?t="+_beforeUnload_time,{msg:"浏览器关闭",time:_gap_time},function(json){},"text");else $.post(pathName+"/back/bi!aaaa.s2?t="+_beforeUnload_time,{msg:"浏览器刷新",time:_gap_time},function(json){},"text"); } window.onbeforeunload =function (){_beforeUnload_time =new Date().getTime();if(is_fireFox)//火狐关闭执行 $.post(pathName+"/back/bi!aaaa.s2?t="+_beforeUnload_time,{msg:"火狐关闭"},function(json){},"text"); }
服务端代码(SSH实现):
public void aaaa(){System.out.println(base.getParameter("msg")+",间隔:"+base.getParameter("time")); } 对于if(_gap_time <= 5),此处的5是我预设的,按照客户端浏览器而定,也与客户端的机器配置有关系,我的机器关闭浏览器时onbeforeunload事件与onunload事件的数据间隔不超过2ms,而刷新时的间隔100%大于2ms,因为要访问服务器。下面贴出我的测试结果:
下面给大家介绍浏览器关闭监听事件,判断刷新还是关闭
使用onunload或onbeforeunload可以监听浏览器关闭事件,但是无法区分关闭与刷新。以下js代码可以部分监听关闭浏览器的事件!
//鼠标相对于用户屏幕的水平位置 - 窗口左上角相对于屏幕左上角的水平位置 = 鼠标在当前窗口上的水平位置 varn = window.event.screenX - window.screenLeft; //鼠标在当前窗口内时,n<m,b为false;鼠标在当前窗口外时,n>m,b为true。20这个值是指关闭按钮的宽度 varb = n > document.documentElement.scrollWidth-20; //鼠标在客户区内时,window.event.clientY>0;鼠标在客户区外时,window.event.clientY<0 if(b && window.event.clientY < 0 || window.event.altKey || window.event.ctrlKey){alert('关闭浏览器时你想做的事'); }elseif(event.clientY > document.body.clientHeight || event.altKey){alert('关闭浏览器时你想做的事'); }
js 监听浏览器刷新还是关闭事件相关推荐
- vue监听浏览器刷新和关闭事件,并在页面关闭/刷新前发送请求
vue监听浏览器刷新和关闭事件,并在页面关闭/刷新前发送请求 1.需求背景: 2.需求分析: 3.实现方式: 4.实现方式解析: 1)浏览器页面事件基础 2)在mounted监听beforeunloa ...
- VUE监听页面刷新和关闭事件
背景:公司有一个数据看板,,需求是要统计看板有多少人看过,,每个人停留的曝光时间 使用技术:目前使用的技术是 后端Springboot 权限用的是SpringSecurity,前端页面是 Vue+El ...
- vue监听浏览器刷新和关闭;
注意:区分不了浏览器是触发了刷新还是关闭,而且提示的弹框是无法自定义的:如果有大佬有方法能区分,还请评论学习一下!感谢! 代码可直接复制: <template><div>< ...
- linux输入数字切换浏览器tab,js监听浏览器tab窗口切换
js监听浏览器tab窗口切换 --IT唐伯虎 摘要:js监听浏览器tab窗口切换. if (document.hidden !== undefined) { document.addEventList ...
- Vue中监听页面刷新和关闭beforeunload事件
代码 在methods中定义事件方法,在mounted 生命周期钩子中绑定事件, 在destoryed钩子中卸载事件 mounted () {window.addEventListener('befo ...
- js监听浏览器tab页面变化
js监听浏览器tab页面变化 引言 今天写到一个需求,当用户离开当前页面的时候,需要关闭页面的一个功能,查找资料发现了这个指令,个人觉得很有用,记录下来... 直接上代码 mounted:(){thi ...
- html5中检测网络状态的方法,前端js监听浏览器网络变化
首先,为什么要让前端判断用户的网络状态呢--为了更好的用户体验. 其次,前端能否判断网络状态?有哪些方法? 1,可以做到渐进式判断,不能做到绝对准确. 2,使用的是navigator.onLine或n ...
- js监听浏览器关闭事件(区分刷新和关闭,兼容IE9,10,11,Edge,Chrome和Firefox)
由于各浏览器兼容性不同,所以首先要先区分各浏览器 var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 var isOpera = use ...
- 【不得不看的几种js监听浏览器返回,关闭,刷新】
监听浏览器切换页面 //切换页面document.addEventListener('visibilitychange', function () { //浏览器切换事件if (document.vi ...
最新文章
- Slf4j 包老冲突,每次排查半天,是什么原因?怎么解决?
- 云计算时代的网络安全
- StringBuilder类型的基本用法
- 使用了12个月的苹果 M1 芯片,我发现了它的「致命」弱点
- 二分答案——数列分段 Section II(洛谷 P1182)
- Cookie工具类-cookieUtil.js
- 微软开源 Scalar,提升操作巨型 Git 仓库的速度
- html绘制圆形和弧形的代码,html5 canvas用来绘制弧形的代码实现
- 不要安全要性能,禁用补丁提高CPU性能
- win10自带抓包工具_[教程] 利用抓包工具从Windows 10 应用商店里下载应用程序离线安装包...
- web表格制作--11.27
- 快速计算某一天是星期几-蔡勒公式
- python idle怎么保存_Word文档如何设置自动保存
- 开源物联网终端设备操作系统
- JRebel and XRebel idea热部署插件的使用
- (5.7)mysql高可用系列——MySQL中的GTID复制(理论篇)【转】
- 沪江前端由H5页面引起的一场前端数据结构讨论 1
- unity资源包分享
- 汇编指令msr_arm汇编—mrs,msr
- ubuntu安装budgie桌面
热门文章
- 用计算机考试不保存直接提交,计算机一级考试操作题没储存,然后就交卷,系统会自动储存答案吗?有...
- 复制mysql 搬家_mysql数据库搬家,可以直接复制数据库文件吗
- Learning-Python【24】:面向对象之组合
- 软考中级,【软件评测师】经验分享
- js常见正则表达式验证
- 祛除雀斑的健康方法 - 生活至上,美容至尚!
- [实战]C++加Lua加SDL来重写龙神录弹幕游戏(5):添加背景
- document对象转字符串
- 程序员半年找不到工作就因为大龄?太歧视了,气人
- 003:打印ASCII码