页面关闭或返回触发JS事件，刷新不触发

最新推荐文章于 2024-05-24 10:06:19 发布

油炸小波

最新推荐文章于 2024-05-24 10:06:19 发布

阅读量1.3w

点赞数 3

分类专栏：自学工具

本文链接：https://blog.csdn.net/weixin_38964895/article/details/82345243

版权

自学工具专栏收录该内容

74 篇文章 0 订阅

订阅专栏

页面加载时只执行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("是刷新而非关闭");
}
}

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之间的时间肯定比关闭的时候时间长，经过测试确实如此。

使用onunload或onbeforeunload可以监听浏览器关闭事件，但是无法区分关闭与刷新。以下js代码可以部分监听关闭浏览器的事件！

//鼠标相对于用户屏幕的水平位置 - 窗口左上角相对于屏幕左上角的水平位置 = 鼠标在当前窗口上的水平位置
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){
    关闭浏览器时你想做的事
}

油炸小波

关注

3
点赞
踩
11

收藏

觉得还不错? 一键收藏
打赏
3
评论
页面关闭或返回触发JS事件，刷新不触发

页面加载时只执行onload页面关闭时只执行onunload页面刷新时先执行onbeforeunload，然后onunload，最后onload。经过验证我得出的结论是：## 对于ie，谷歌，360：- 页面加载时只执行onload- 页面刷新时，刷新之前执行onbeforeunload事件，在新页面即将替换旧页面时onunload事件，最后onload事件。- 页面关闭时，先onb...
复制链接

扫一扫