js 判断窗口刷新和关闭，分各种情况

最新推荐文章于 2023-11-15 10:30:35 发布

lszx618

最新推荐文章于 2023-11-15 10:30:35 发布

阅读量4.5k

点赞数 1

CC 4.0 BY-SA版权

文章标签： js

本文链接：https://blog.youkuaiyun.com/lszx618/article/details/25318683

本文介绍了一种使用JavaScript区分网页刷新和关闭的方法，并提供了一个利用隐藏表单字段来判断页面是否因刷新而加载的备选方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目要求记录页面的刷新和关闭次数，在网上查了各种资料，都是用窗口大小的原理来识别，但其实当调用onbeforeunload事件的时候是不会捕捉鼠标的mousemove事件的，获取不到event.clientX事件，而且鼠标一旦离开页面范围，就不能继续获取鼠标的e.clientX位置了，所以我采用了下面的方法，测试可用的：

原理是刷新只记录F5和右键两种方式，其他认为是关闭，关闭只识别alt+f4以及Mac机子的Commad+q其他认为是点击标签或窗口关闭。

刷新调用：onbeforeunload，onunload，onload;

关闭调用：onbeforeunload，onunload;

方法如下：

var currentKeyCode = -1,altkey=false ,rightKey= false,pageY=0,listernType= null;

$(window).keydown( function(){

top.altkey = event.altKey;

top.currentKeyCode = event.keyCode;

});

$(document).on("contextmenu" , function(e){

rightKey = true ;

});

function isReloadOrClose(event){

var msg= null ;

if (currentKeyCode == 116 || rightKey) {

//116:F5

if (currentKeyCode == 116){

msg = "刷新窗口!(F5)" ;

}

if (rightKey){

msg = "右键刷新窗口!" ;

}

top.listernType = "reload" ;

} else{

msg = "点击关闭窗口" ;

top.listernType = "close" ;

if ((altkey || currentKeyCode == 18) || (currentKeyCode == 115) ){

msg = "关闭窗口!(alt+F4)" ;

}

if (currentKeyCode == 91){

msg = "Mac关闭窗口!(commad)" ;

}

currentKeyCode = -1,altkey=false ,rightKey= false,pageY=0,listernType= null;

return msg;

}

window.onbeforeunload = function (event) {

return isReloadOrClose(event)

}

$(window).unload( function(event){

alert( "Bye now!" );

});

网上还有一种识别刷新的方法，没试过，方法如下：

原文是http://www.tedpavlic.com/post_detect_refresh_with_javascript.php

原文给了两个方法，方法一大致翻译如下，

对于大多数浏览器，表单隐藏域的值在浏览器刷新后仍被保留。所以可以给页面添加一个拥有默认值（本例中为空）的表单隐藏域，如果在pageload事件中此默认值未改变，则说明pageload事件不是被刷新触发的，此时可以给这个表单隐藏域设置一个非默认值；若在pageload事件中此表单隐藏域的值被改变了（在非刷新页面导致的pageload事件中改变的），那么说明此时的pageload事件是被刷新触发的。
代码如下，
<html>
<head>

<script language="JavaScript"> 
</script>

</head>

<body onLoad="JavaScript:checkRefresh();">

<form name="refreshForm">
<input type="hidden" name="visited" value="" />
</form>

</body>
</html>