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

    目录

    1.屏幕监听的原理：

    2.创建项目

    3.离开计时

    1.屏幕监听的原理：

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

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

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

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

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

     常见的监听函数：

    1. document.addEventListener("visibilitychange", function() {
    2.   if(document.visibilityState == 'hidden'){
    3.       //todo...
    4.   } else if (document.visibilityState == 'visible') {
    5.       //todo...
    6.   }
    7. });

    2.创建项目

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>tab1</title>
    8. </head>
    9. <body>
    10.     <h1>我是页面1</h1>
    11.     <script>
    12.     document.addEventListener("visibilitychange", function() {
    13.  
    14.             if(document.visibilityState == 'hidden'){
    15.             document.title = '禁止切换窗口';
    16.          } else if(document.visibilityState == 'visible') {
    17.             document.title = 'tab1';
    18.          }
    19.           });
    20.     </script>
    21. </body>
    22. </html>

    效果图：

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

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

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

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>tab1</title>
    8. </head>
    9. <body>
    10.     <h1>我是页面1</h1>
    11.     <script>
    12.         document.addEventListener("visibilitychange", function() {
    13.             console.log(document.visibilityState);
    14.             if(document.visibilityState == 'hidden'){
    15.                 document.title = '禁止切屏';
    16.             } else if(document.visibilityState == 'visible') {
    17.                 document.title = 'tab1';
    18.             }
    19.         });
    20. ​
    21.         window.onfocus = function () {
    22.             document.title = 'tab1';
    23.            
    24.         };
    25.         window.onblur = function () {
    26.             alert('禁止切屏');
    27.         };
    28. ​
    29.     </script>
    30. </body>
    31. </html>

    3.离开计时

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

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

    1. let n = 0;
    2. let isFirst = true; 
    3. window.onfocus = function () {
    4.   if(!isFirst) {
    5.     alert(`请注意，你切屏了！总共离开${n}秒`);
    6.     isFirst = true;
    7.     n = 0;
    8.   }
    9.   document.title = 'tab1';
    10. };
    11. window.onblur = function () {
    12.   isFirst = false;
    13.   setInterval(function() {
    14.     n++;
    15.   }, 1000)
    16. };
    17.

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

  • 相关阅读:
    《Linux Vim急救手册：E138错误全攻略与故障排除秘籍》
    Centos中清除因程序异常终止,导致的残留的Cache/buff_drop_caches命令---linux工作笔记063
    JZ22 链表中倒数最后k个结点
    JAVA【设计模式】命令模式
    Arthas（阿尔萨斯）：阿里巴巴开源的线上问题诊断工具
    DTD和XSD的区别
    Java8——Lambda、stream API
    关于算法复杂度的几张表
    Tomcat高级配置(应用场景总结及示例)
    动态规划31（Leetcode188买卖股票的最佳时机4）
  • 原文地址：https://blog.csdn.net/m0_68997646/article/details/128012588