js判断浏览器窗口(选项卡)的关闭与刷新

今日项目遇到一个问题,有一个功能会在浏览器的主窗口中新开一个窗口,然后业务要求:关闭新窗口的时候往后端发个请求,刷新的时候不发送。知道有个onbeforeunload事件是用于捕获关闭浏览器事件(包括刷新)的,但刷新也会走此方法,所以行不通,于是就网上找了找资料,网上回答的最多的大致是这样的

window.onbeforeunload = function() {
    //鼠标相对于用户屏幕的水平位置 - 窗口左上角相对于屏幕左上角的水平位置 = 鼠标在当前窗口上的水平位置
    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){
              //关闭浏览器时你想做的事
        alert("关闭");
    }else if(event.clientY > document.body.clientHeight || event.altKey){
              //刷新浏览器时你想做的事
        alert("刷新");
    }
}

但是,这个方法是监听浏览器右上角的关闭事件的,我想要的是选项卡的关闭与刷新事件,下面我们先来分析一下关闭窗口相关的几个方法

页面关闭时先执行onbeforeunload,然后onunload
页面刷新时先执行onbeforeunload,然后onunload,最后onload。

从上面的分析中,发现关闭与刷新都会走onbeforeunload与onunload,如果我们认为用这两个方法无法区分关闭与刷新事件,那就大错特错了,正因为关闭与刷新事件都会走onbeforeunload与onunload,所以我们利用了一个关键点就能区分出这两种,那就是:时间差

最终解决方法

var beginTime = 0//执行onbeforeunload的开始时间
var differTime = 0;//时间差
window.onunload = function (){
        differTime = new Date().getTime() - beginTime;
        if(differTime <= 5) {
            console.log("浏览器关闭")
             $.ajax({
                type: "POST",
                url:url,
                dataType: "JSON",
                cache: false,
                success: function(msg){
                    console.log(msg);
                    },
                error:function(err){
                    console.log(err)
                }
             })
        }else{
            console.log("浏览器刷新")
        }

    }
    window.onbeforeunload = function (){
       beginTime = new Date().getTime();
    };

分析:虽然刷新与关闭都会走onbeforeunload与onunload,但可能因为刷新在加载新页面前内部机制还需要做一些准备工作,所以刷新事件在执行到onunload事件时,用的时间会比关闭事件时间长,在我的测试页面中,页面里面没啥内容,关闭时onbeforeunload与onunload的时间差一般会在3毫秒内,而刷新事件的时间差一般会在10毫秒以上,当我真正用到项目中的时候(真正的项目页面中就有很多内容了),刷新事件的时间差竟能达到100毫秒左右,而关闭事件时间差还是3毫秒左右,这就大大保证了此方法的准确率,所以,判断浏览器窗口或者说是选项卡的关闭与刷新,此方法是比较合适的。

展开阅读全文

没有更多推荐了,返回首页