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<mbfalse;鼠标在当前窗口外时,n>mbtrue20这个值是指关闭按钮的宽度
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('关闭浏览器时你想做的事');
}

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
### 回答1: 在Web开发中,经常需要通过JavaScript来监听浏览器关闭刷新事件。可以使用window对象的beforeunload和unload事件来实现这个功能。 beforeunload事件会在用户要关闭页面时触发,可以用来在用户离开前提示一些消息。可以通过window.onbeforeunload属性来绑定beforeunload事件处理程序。 当用户点击确定按钮时,页面将被关闭,如果用户点击取消按钮,则页面将保持不变。在beforeunload事件处理程序中,可以通过返回一个非空字符串来提示用户需要保存的未完成操作。 unload事件会在页面完全卸载后触发,可以用来清除一些资源,例如定时器和事件监听器等。可以通过window.onunload属性来绑定unload事件处理程序。 需要注意的是,对于浏览器关闭事件,不同的浏览器有不同的支持方式和行为,因此,在实现监听浏览器关闭刷新事件时,需要进行兼容性测试,以保障其在不同的浏览器中的稳定性和可靠性。 总的来说,通过使用 JavaScript 监听浏览器关闭刷新,可以处理一些必要的业务逻辑,从而提升用户体验和应用稳定性。 ### 回答2: JavaScript 可以监听浏览器关闭刷新事件,以促进更好的用户体验。这些事件通常是用户主动进行的,但也有可能是浏览器崩溃或其他不可预测的情况引发的。 要监听浏览器关闭事件,可以使用 window.onbeforeunload 事件。这个事件将在浏览器窗口将要关闭之前触发。可以将要执行的代码放在这个事件的回调函数中,以便在用户关闭浏览器时执行。 要监听浏览器刷新事件,可以使用 window.onbeforeunload 事件和 window.onload 事件。在页面加载时,window.onload 事件会被触发。然后,如果用户刷新了页面,window.onbeforeunload 事件会在页面重新加载之前被触发。可以使用这些事件来保存当前页面的状态,并在页面重新加载时恢复状态。 要注意的是,浏览器的不同版本和不同设置可能会影响这些事件的行为。有些浏览器可能不允许在 onbeforeunload 事件中弹出警告框或确认框,而有些浏览器则可以。因此,需要谨慎处理这些事件,并确保它们不会对用户造成不必要的干扰或安全风险。 综上所述,JavaScript 监听浏览器关闭刷新事件可以帮助我们提供更好的用户体验,并确保我们的网站和应用程序在这些情况下仍然能够正常使用。 ### 回答3: JS 监听浏览器关闭刷新是 Web 开发中比较常见的需求,主要涉及到浏览器事件监听和处理。比如在某些场景下,当用户关闭浏览器刷新页面时,需要提醒用户或执行一些特定的操作。 浏览器关闭事件监听JS 监听浏览器关闭主要通过 `window` 对象提供的 `beforeunload` 事件来实现。`beforeunload` 事件浏览器卸载页面之前被触发,可以用来防止用户误操作或提醒用户保存数据。 例如,在页面中添加以下 JS 代码,就能监听浏览器关闭事件: ``` window.addEventListener('beforeunload', function(event) { event.preventDefault(); return event.returnValue = '确定离开此页面吗?'; }); ``` 上述代码中,我们使用 `addEventListener` 方法绑定了 `beforeunload` 事件监听器。在事件回调函数中,我们使用 `event.preventDefault()` 方法来阻止浏览器默认的关闭行为,并返回一个提示用户的字符串,如果用户确认离开页面,才能真正关闭页面。 浏览器刷新事件监听JS 监听浏览器刷新主要通过 `beforeunload` 和 `unload` 事件组合使用实现。当用户刷新页面时,会先触发 `beforeunload` 事件,然后触发 `unload` 事件。 例如,在页面中添加以下 JS 代码,就能监听浏览器刷新事件: ``` window.addEventListener('beforeunload', function(event) { // Do something before refreshing }); window.addEventListener('unload', function(event) { // Do something after refreshing }); ``` 上述代码中,我们分别使用 `addEventListener` 方法绑定了 `beforeunload` 和 `unload` 事件监听器,并在事件回调函数中分别执行了特定的操作。 需要注意的是,由于 `beforeunload` 事件可以阻止浏览器关闭刷新页面,因此在使用它时需要谨慎考虑,以避免影响用户体验和引起安全问题。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值