网页可见性

最近项目需要统计游戏在线时长,当数据量大的时候可以忽略一些特殊情况的数据(浏览器最小化、页面菜单切换、锁屏等)。但是在数据量少的情况下,需要把这些特殊情况排除掉,避免数据收到干扰。针对这种情况,浏览器有自带一种api,用来监听网页的可见性。本文针对这种情况,做个小测试。

1、Page Visibility API

  • Document.hidden:如果页面处于隐藏状态,则返回 true,否则返回 false
  • Document.visibilityState:
    • visible:页面内容至少部分可见
    • hidden:页面内容对用户不可见,原因可能是文档标签页在后台或属于最小化窗口的一部分,也可能是设备屏幕关闭。
  • visibilitychange:当标签页的内容变为可见或被隐藏时触发。

2、web页面生命周期

  • 获取当前页面生命周期状态
javascript 复制代码
    let eventName="visibilitychange",propName="hidden", stateName="visibilityState";
    ["webkit", "moz", "ms", "o"].every(m=>{
        if (typeof document[m+"Hidden"] !== 'undefined') {
            eventName = `${m}visibilitychange`;
            propName = `${m}Hidden`;
            stateName=`${m}VisibilityState`;
        }
    })
    const getState = () => {
            if (document[stateName] === 'hidden') {
                return 'hidden';
            }
            if (document.hasFocus()) {
                return 'active';
            }
            return 'passive';
    };

2、测试案例

javascript 复制代码
    let eventName="visibilitychange",propName="hidden", stateName="visibilityState";
    ["webkit", "moz", "ms", "o"].every(m=>{
        if (typeof document[m+"Hidden"] !== 'undefined') {
            eventName = `${m}visibilitychange`;
            propName = `${m}Hidden`;
            stateName=`${m}VisibilityState`;
        }
    })
    const getState = () => {
            if (document[stateName] === 'hidden') {
                return 'hidden';
            }
            if (document.hasFocus()) {
                return 'active';
            }
            return 'passive';
    };
    let timer = null; count = 0;
    document.addEventListener(eventName,()=>{
        if (document[propName]) {
            console.log("==>>隐藏");
            count=0;
            clearTimeout(timer);
        } else {
            console.log("==>>显示");
            loop("重新")
        }
        console.log(`==>>状态:${getState()}`);
    })
    const loop=(title)=>{
         timer=setTimeout(() => {
            count++;
            console.log(`==>>${title}定时任务:${count}`);
            console.log(`==>>状态:${getState()}`);
            loop(title);
        }, 3000)
    }

    loop("开始");
    window.addEventListener("blur",()=>{
        console.log("==>失去焦点");
    })

注意:如果当前页面仍是处于激活页面,就应该参考是否要通过全局添加事件监听,来判断用户是否有在操作,还是单纯挂机

3、使用场景

  • 暂停服务器接口轮询
  • 停止网页上动画、视频、音频等播放
  • 暂停游戏
  • 监控页面等

4、参考:

相关推荐
可子是我的小猫3 分钟前
【JS】模块(一)
javascript
不一样的少年_18 分钟前
同事以为要重写,我8行代码让 Vue 2 公共组件跑进 Vue 3
前端·javascript·vue.js
草履虫建模22 分钟前
在 RuoYi 中接入 3D「园区驾驶舱」:Vue2 + Three.js + Nginx
运维·开发语言·javascript·spring boot·nginx·spring cloud·微服务
云枫晖25 分钟前
JS核心知识-数据转换
前端·javascript
JohnYan41 分钟前
工作笔记 - 一个浏览器环境适用的类型转换工具
javascript·后端·设计模式
前端Hardy1 小时前
12个被低估的 CSS 特性,让前端开发效率翻倍!
前端·javascript·css
前端Hardy1 小时前
HTML&CSS:精美的3D折叠卡片悬停效果
前端·javascript·css
nightunderblackcat1 小时前
新手向:中文语言识别的进化之路
前端·javascript·easyui
用户47949283569152 小时前
🤫 你不知道的 JavaScript:`"👦🏻".length` 竟然不是 1?
前端·javascript·面试
xingkongv2 小时前
从“调接口仔”到“业务合伙人”:前端的 DDD 初体验
javascript·前端框架