浏览器监听当前页 (是否切屏)

浏览器监听当前页 (是否切屏)

一、监听的api

浏览器自带了相关的API了，那就是利用visibilitychange属性，MDN的介绍：

当其选项卡的内容变得可见或被隐藏时，会在文档上触发 visibilitychange (能见度更改)事件。

所以我只需要注册监听对visibilitychange的事件即可：

document.addEventListener("visibilitychange", function() {
  if(document.visibilityState == 'hidden'){
     console.log('hidden')
  } else if (document.visibilityState == 'visible') {
      console.log('visible')
  }
});
复制代码

这里需要注意的是，MDN的上有说明的是，不要使用window而是document：

出于兼容性原因，请确保使用 document.addEventListener而不是window.addEventListener来注册回调。 Safari <14.0仅支持前者。

这个属性存在浏览器兼容性问题：在IE10以下不支持该属性

二、使用

 document.addEventListener("visibilitychange", function () {
            console.log(document.visibilityState);
            if (document.visibilityState == 'hidden') {
                document.title = '切换到了其他页签';
            } else if (document.visibilityState == 'visible') {
                document.title = '切换回来了';
            }
        });

三、监听当前窗口是否处于焦点状态

                    document.title = '页面1';
                  
                };
                window.onblur = function () {
                    alert('失去焦点');
                };

        let n = 0;
        let isFirst = true;
        window.onfocus = function () {
            
            if (!isFirst) {
                console.log(`请注意，你失去焦点了！总共离开${n}秒`);
                isFirst = true;
                n = 0;
            }

        };
        window.onblur = function () {
            isFirst = false;            
            // setInterval(function () {
            //     n++;
            // }, 1000)
            setTimeout(run,1000)
        };
        let run =function(){
            n++;
            setTimeout(run,1000)
        }

 let blurtime=null
      let focustime=null
      let  isFirst=true
        window.onfocus = function () {
            focustime=new Date().valueOf()
            let second=(focustime-blurtime)/1000
            second= Math.round((second + Number.EPSILON) * 10) / 10
            if (!isFirst) {
                console.log(`请注意，你失去焦点了！总共离开${second}秒`);
            }

        };
        window.onblur = function () {
            if(isFirst){
                isFirst = false;
            }
            blurtime=new Date().valueOf()
        };