网页可见性

最近项目需要统计游戏在线时长,当数据量大的时候可以忽略一些特殊情况的数据(浏览器最小化、页面菜单切换、锁屏等)。但是在数据量少的情况下,需要把这些特殊情况排除掉,避免数据收到干扰。针对这种情况,浏览器有自带一种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、参考:

相关推荐
DanB2434 分钟前
html复习
javascript·microsoft·html
呼啦啦呼啦啦啦啦啦啦7 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
前端 贾公子9 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录9 小时前
链表合并:双指针与递归
前端·javascript·算法
拼图2099 小时前
element-plus——图标推荐
javascript·vue.js·elementui
期待のcode9 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互
koooo~10 小时前
JavaScript中的Window对象
开发语言·javascript·ecmascript
安心不心安11 小时前
React hooks——useReducer
前端·javascript·react.js
像风一样自由202011 小时前
原生前端JavaScript/CSS与现代框架(Vue、React)的联系与区别(详细版)
前端·javascript·css
啃火龙果的兔子11 小时前
react19+nextjs+antd切换主题颜色
前端·javascript·react.js