0
点赞
收藏
分享

微信扫一扫

监听切屏

一、监听切换原理

为什么可以监听浏览器窗口的切换呢?那自然是因为浏览器自带了相关的API了,那就是利用visibilitychange属性,MDN的介绍:

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

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

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

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

当 visibleStateState 属性的值转换为 hidden 时,Safari 不会按预期触发 visibilitychange;因此,在这种情况下,你还需要包含代码以侦听 pagehide 事件。


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

这个属性存在浏览器兼容性问题:

监听切屏_html

二、创建项目

准备两个html文件,内容如下:

tab1.html

<!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 = '别看tab2了,看我';
            } else if(document.visibilityState == 'visible') {
                document.title = 'tab1';
            }
        });
    </script>
</body>
</html>

tab2.html

<!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>我是页面2</h1>
    <script>
        document.addEventListener("visibilitychange", function() {
            console.log(document.visibilityState);
            if(document.visibilityState == 'hidden'){
                document.title = '别看tab1了,看我';
            } else if(document.visibilityState == 'visible') {
                document.title = 'tab1';
            }
        });
    </script>
</body>
</html>

已经可以实现两个tab页签之前的切换了。但这只是实现了窗口之间的切换,假如存在扩展屏(从一个屏幕移到另一个屏幕)或者是只有一个窗口,但是打开了其他app,是无法监听到的,比如我从浏览器切换到编辑器,所以,如果只靠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 = '别看tab2了,看我';
            } else if(document.visibilityState == 'visible') {
                document.title = 'tab1';
            }
        });

        window.onfocus = function () {
            document.title = 'tab1';
           
        };
        window.onblur = function () {
            alert('请注意,你切屏了!');
        };

    </script>
</body>
</html>

这样从浏览器切换到编辑器,单个窗口的情况下,失去焦点也能监听到

三、离开计时

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

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 条评论