判断浏览器窗口是否关闭之项目开发案例

「这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战」

在项目当中会有打开新的浏览器窗口的页面，为了监控从上一个页面跳到先打开的页面，然后再返回上一个页面的时候，需要做数据的刷新和加载，因为是浏览器的两个页面的动态监测，并且是在同一个项目当中，所以：

页签切换或触发浏览器的 visibilitychange 事件

这方面的应用还有切换或最小化视频页面暂停播放，打开当前页签视频继续播放等。

1，方法一：监听：visibilitychange事件

window.addEventListener("visibilitychange",function(){

　　console.log(document.hidden)

});

判断当前页面是否切换为可见：

1）document.hidden

　　返回值为true：表示被隐藏，不可见

　　返回值为false：表示未被隐藏，可见

2）document.visibilityState

　　返回值有 visible：表示是可见状态

　　返回值为 hidden：表示隐藏状态

浏览器监测窗口变化时的日志：         

2，window.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事件的变化时间来判断标签页面是否被关闭，一般被关闭的页面事件执行时间会很短，没有被关闭的页面需要加载页面内容，

刷新在加载新页面前内部机制还需要做一些准备工作 加载时间会相对较长

var beginTime = 0；//执行onbeforeunload的开始时间
var differTime = 0;//时间差
window.onunload = function (){
        differTime = new Date().getTime() - beginTime;
        if(differTime <= 5) {
            console.log("浏览器关闭")
             
        }else{
            console.log("浏览器刷新")
        }

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