js屏幕监听主要是浏览器的visibilitychange属性 1.屏幕切换监听主要是浏览器的visibilitycha

主要是浏览器的visibilitychange属性

1.屏幕切换监听

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>  
    <script>
      document.addEventListener('visibilitychange', function() {
        
        //console.log(document.visibilityState)       
        switch(document.visibilityState) {
          case 'prerender':
            console.log('网页预渲染，内容不可见')
            break;
            
          case 'hidden':
            console.log('内容不可见，处理后台、最小化、锁屏状态')
            break;
            
          case 'visible':
            console.log('处于正常打开')
            break;
            
          case 'unloaded':
            console.log('文档被卸载')
            break;
            
        }
      })
       let n = 0;
    let isFirst = true;
    window.onfocus = function (val) {
      if (!isFirst) {
        alert(`请注意，你切屏了！总共离开${n}秒`);
        isFirst = true;
        n = 0;
      }
      document.title = 'tab1';
    };
    window.onblur = function () {
      isFirst = false;
      setInterval(function () {
        n++;
      }, 1000)
    };

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