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

版权声明：本文为CSDN博主「微行」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/itlsq/article/details/81095323

页面关闭时先执行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毫秒左右，这就大大保证了此方法的准确率，所以，判断浏览器窗口或者说是选项卡的关闭与刷新，此方法是比较合适的。