这篇文章主要介绍了基于JavaScript判断浏览器到底是关闭还是刷新(超准确)的相关资料,需要的朋友可以参考下

本文是小编总结的一些核心内容，个人感觉对大家有所帮助，具体内容请看下文：

页面加载时只执行onload 
页面关闭时只执行onunload 
页面刷新时先执行onbeforeunload，然后onunload，最后onload。

经过验证我得出的结论是：

//对于ie，谷歌，360：

//页面加载时只执行onload
//页面刷新时，刷新之前执行onbeforeunload事件，在新页面即将替换旧页面时onunload事件，最后onload事件。
//页面关闭时，先onbeforeunload事件，再onunload事件。

//对于火狐：

//页面刷新时，只执行onunload；页面关闭时，只执行onbeforeunload事件
那么回归正题，到底怎样判断浏览器是关闭还是刷新？我按照网上的各种说法实验千百遍，都未成功，其中各种说法如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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("是刷新而非关闭");
}
}

和

1
2
3
4
5
6
7
8
9
10
11
function CloseOpen(event) {
if(event.clientX<=0 && event.clientY<0) {
alert("关闭");
}
else
{
alert("刷新或离开");
}
}
</script>
<body onunload="CloseOpen(event)">

..........................

这些方法都不管用，但是我并没有放弃，想啊想啊........

按照上面我得出结论，

//对于ie，谷歌，360：

//页面加载时只执行onload
//页面刷新时，刷新之前执行onbeforeunload事件，在新页面即将替换旧页面时onunload事件，最后onload事件。
//页面关闭时，先onbeforeunload事件，再onunload事件。

//对于火狐：

//页面刷新时，只执行onunload；页面关闭时，只执行onbeforeunload事件
刷新的时候先onbeforeunload，然后取服务端请求数据，在新页面即将替换旧页面时onunload事件，而页面关闭时，先onbeforeunload事件，再立即onunload事件。那么在刷新的时候，onbeforeunload与onunload之间的时间肯定比关闭的时候时间长，经过测试确实如此。

贴出我的测试代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var _beforeUnload_time = 0, _gap_time = 0;
var is_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实现）：

1
2
3
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代码可以部分监听关闭浏览器的事件！

1
2
3
4
5
6
7
8
9
10
//鼠标相对于用户屏幕的水平位置 - 窗口左上角相对于屏幕左上角的水平位置 = 鼠标在当前窗口上的水平位置
var n = window.event.screenX - window.screenLeft;
//鼠标在当前窗口内时，n<m，b为false；鼠标在当前窗口外时，n>m，b为true。20这个值是指关闭按钮的宽度
var b = 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){
关闭浏览器时你想做的事
}else if(event.clientY > document.body.clientHeight || event.altKey){
关闭浏览器时你想做的事
}

这段js能监听到鼠标点击浏览器关闭按钮、浏览器状态栏鼠标右键弹出菜单中的关闭以及各种快捷键。但是双击浏览器坐上角图标关闭浏览器和关闭标签页无法监听。

以上所述是本文的全部内容，写的不好还请各位大侠多多提出宝贵意见。

转自：http://www.jb51.net/article/78977.htm

基于JavaScript判断浏览器到底是关闭还是刷新(超准确)的更多相关文章

  1. JavaScript判断浏览器类型及版本

    JavaScript是前端开发的主要语言,我们可以通过编写JavaScript程序来判断浏览器的类型及版本.JavaScript判断浏览器类型一般有两种办法,一种是根据各种浏览器独有的属性来分辨,另一 ...

  2. 使用javascript判断浏览器类型

    之前在项目中遇到过要针对不同浏览器做不同的一些js或者css操作,后来某个朋友也突然问到这个问题,所以,整理了一下,在这里留个笔记,方便以后使用. 使用javascript判断浏览器类型: funct ...

  3. 基于jquery判断浏览器版本过低代码

    基于jquery判断浏览器版本过低代码.这是一款对不支持HTML5跟CSS3代码的浏览器提示用户更换特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div sty ...

  4. 《如何使用Javascript判断浏览器终端设备》

    WEB开发中如何通过Javascript来判断终端为PC.IOS(iphone).Android呢? 可以通过判断浏览器的userAgent,用正则来判断手机是否是ios和Android客户端. va ...

  5. 如何使用Javascript判断浏览器终端设备

    WEB开发中如何通过Javascript来判断终端为PC.IOS(iphone).Android呢? 可以通过判断浏览器的userAgent,用正则来判断手机是否是ios和Android客户端 var ...

  6. javascript判断浏览器的版本

    在javascript中直接的使用navigator.userAgent就可以获取当前浏览器的版本等信息,以下是列出来的关于不同浏览器显示的值(Windows.Android.iPhone): IE6 ...

  7. （转）JavaScript判断浏览器类型及版本

    IE 只有IE支持创建ActiveX控件,因此她有一个其他浏览器没有的东西,就是ActiveXObject函数.只要判断window对象存在ActiveXObject函数,就可以明确判断出当前浏览器是 ...

  8. javascript判断浏览器是否是隐私模式

    判断浏览器是否是隐私模式,隐私模式下有写api不可用 1. try { localStorage['test'] = 'test'; //localStorage和sessionStorage都存在, ...

  9. javascript判断浏览器核心

    20 21 22 23 24 /** * 判断浏览器核心 * @return IE6.0/IE7.0/IE8.0/FireFox/Opera/other * @author ypz */ functi ...

随机推荐

  1. Google Chrome 未响应。是否立即重新启动？---解决方法(秒速解决)

    Google Chrome 未响应.是否立即重新启动? 解决方法 不当的退出会造成 Google Chrome 无法启动.出现“Google Chrome 未响应.是否立即重新启动?”的错误. 要解决 ...

  2. 【转】android学习日记01--综述

    转自:http://www.cnblogs.com/aiguozhe/p/3541941.html 一.总体框架 先上一张google提供官方的Android框架图: Android系统架构由5部分组 ...

  3. Intellij IDEA 将工程转换成maven工程 详解

    1> 右键工程,点击 Add Framework Support   2> 选中 Maven,再点击 OK   3> 工程根目录自动生成 pom.xml 文件,这样 工程就支持 Ma ...

  4. PCL采样一致性算法

    在计算机视觉领域广泛的使用各种不同的采样一致性参数估计算法用于排除错误的样本,样本不同对应的应用不同,例如剔除错误的配准点对,分割出处在模型上的点集,PCL中以随机采样一致性算法(RANSAC)为核心 ...

  5. IDEA隐藏.idea文件夹

    打开setting,Editor-->File Types.在Ignore files and folders中添加“.idea;”

  6. Rscripts的使用，以及如何为R脚本传参数

    一.在windows下使用Rscript: 1.进入cmd.exe下,将当前工作目录转到Rscript.exe所在目录下面,然后调用Rscript  **.R文件即可.但是所调用的.R文件必须是在R的 ...

  7. JSP之应用Servlet过滤器进行身份验证

    1.Servlet过滤器的作用描述(1)在HttpServletRequest到达Servlet 之前,拦截客户的HttpServletRequest. 根据需要检查HttpServletReques ...

  8. QTcpSocket的连续发送数据和连续接收数据

    关于这个问题折腾了我好久,以前做些小练习的时候,用QTcpSocket的write()一数据,然后接收方只要emit一个readyread()信号然后就用QTcpSocket的read()去读.本以为 ...

  9. 自然语言交流系统 phxnet团队 创新实训 项目博客 （六）

    从你进入软件开始,你就建立了和服务器的联系.这是一段和服务器的长连接,直到你退出此软件. 2D文字聊天界面大致实现了文字输入.发送消息.接收消息.你可以通过点击按钮让机器人开启聊天模式或者学习模式.又 ...

  10. linux下查看目录下某种文件类型累计的代码行数

    find 路径 -name '*.py' | xargs wc -l