如何监听电脑屏幕是否发生切换

目录

1.屏幕监听的原理:

2.创建项目

3.离开计时


1.屏幕监听的原理:

为什么可以监听浏览器窗口的切换呢?那就是利用了浏览器的visibilitychange属性,MDN的介绍对visibilitychnge的介绍是:

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

所以如果我要监听屏幕切换的次数,我只需要监听visibilitychange属性即可:

但是记住为了保证浏览器对函数的兼容性,必须要使用document而不是windows

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

 常见的监听函数:

document.addEventListener("visibilitychange", function() {
  if(document.visibilityState == 'hidden'){
      //todo...
  } else if (document.visibilityState == 'visible') {
      //todo...
  }
});

2.创建项目

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tab1</title>
</head>
<body>
    <h1>我是页面1</h1>
    <script>
    document.addEventListener("visibilitychange", function() {

            if(document.visibilityState == 'hidden'){
            document.title = '禁止切换窗口';
         } else if(document.visibilityState == 'visible') {
            document.title = 'tab1';
         }
          });
    </script>
</body>
</html>

效果图:

 当我切换到其他窗口的时候,t原来窗口的tab就显示为禁止切换窗口

但是我们仔细想一想,这种情况只能适用于当我们在浏览器切换页面的时候,但是当我们从浏览器切换到其他程序呢?这个该怎么办,那么这个时候我们就要使用焦点监听属性了

所以,如果只靠visibilitychange这个属性,不能完全实现我们的需求,那还有什么办法呢?当然有的,我们可以监听当前窗口是否处于焦点状态! ,直接上代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tab1</title>
</head>
<body>
    <h1>我是页面1</h1>
    <script>
        document.addEventListener("visibilitychange", function() {
            console.log(document.visibilityState);
            if(document.visibilityState == 'hidden'){
                document.title = '禁止切屏';
            } else if(document.visibilityState == 'visible') {
                document.title = 'tab1';
            }
        });
​
        window.onfocus = function () {
            document.title = 'tab1';
           
        };
        window.onblur = function () {
            alert('禁止切屏');
        };
​
    </script>
</body>
</html>

3.离开计时

除了统计切屏次数外,还有离开的时长,这个也不难,只需要记录离开和再次进入的时间即可:

只要在前面的函数当中加入以下代码

let n = 0;
let isFirst = true; 
window.onfocus = function () {
  if(!isFirst) {
    alert(`请注意,你切屏了!总共离开${n}秒`);
    isFirst = true;
    n = 0;
  }
  document.title = 'tab1';
};
window.onblur = function () {
  isFirst = false;
  setInterval(function() {
    n++;
  }, 1000)
};

那么就可以啦,就可以在弹出警示框的同时,也展示离开的时间啦

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值