HTML+JS 实现监控切屏

最新推荐文章于 2024-10-08 10:14:26 发布

m0_67402235

最新推荐文章于 2024-10-08 10:14:26 发布

阅读量2k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：前端 html 文章标签： vue.js elementui javascript

原文链接：https://blog.csdn.net/qq_22841387/article/details/123132556

前端同时被 2 个专栏收录

21 篇文章

订阅专栏

html

21 篇文章

订阅专栏

该项目演示如何使用Web API的visibilitychange事件监听浏览器标签页的活跃状态，记录用户离开页面的次数和时间。通过document.visibilityState判断页面是否隐藏，结合window.onblur和onfocus事件检测切屏行为。同时，利用sessionStorage记录离开页面的次数，不因页面刷新而丢失计数。此外，还实现了离开时间和切屏时间的记录功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目描述

该项目是我在网上看其他博客的时候无意中看到的，看见别人居然能实现这种操作很好奇

项目要求做到

监控网页状态
记录离开次数
离开时间

记录离开页面

实现这个切换页面功能需要用到一个web的APIvisiblitychange

visibilitychange - Web API 接口参考 | MDN (mozilla.org)

Document.visibilityState - Web API 接口参考 | MDN (mozilla.org)
document.addEventListener("visibilitychange", function() {
  console.log( document.visibilityState );
});
大致就是通过监听visiblitychange获取当前的状态，根据状态document.visibilityState去操作

创建html

创建一个标准的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>第一个标签</title>
</head>
<body>
    <h1>这是第一个标签页</h1>

    <script>
        document.addEventListener('visibilitychange' , () => {
            let state = document.visibilityState

            if(state == "hidden") {
                document.title = "我知道，你切换标签页了--tab1"
            } else {
                document.title = "嘻嘻，你又回来了"
            }
        })
    </script>
</body>
</html>

请添加图片描述

监控是否切屏

根据MDN对state的陈述，visible对部分可见也会触发，所以对于分屏监控是无法监测到的

所以需要监控另一个状态是否foucus，即是否是去当前页面的焦点

window.onblur = () => {
            document.title = "你居然还切屏？？？--tab1"
        }

        window.onfocus = () => {
            document.title = "好吧，你回来了--tab1"
        }

请添加图片描述

记录时间

放置一个标志位，查看是否是触发切屏或者切换标签页，并保存此时的时间戳

当下一次重新触发的时候，显示切屏时间

由于多次出现多次，所以封装成一个函数

	let isCut = false
        let lastTime;

	function recordTime() {
            isCut = true
            lastTime = Date.now()
        }

        function showTimeDiff() {
            if (isCut) {
                let timeDiff = (Date.now() - lastTime) / 1000;
                // alert(`你切屏出去${timeDiff}`)
                console.log(timeDiff);
                isCut = false
            }
        }

请添加图片描述

离开次数

不管是切屏还是离开新建标签页都需要进行计时，而且不会因为刷新而中断

由此想到sessionStorage

function countTimes() {
            let store = window.sessionStorage.getItem('leave-times')
            if( store === null) {
                window.sessionStorage.setItem('leave-times', 0)
                return
            }
            store ++;
            window.sessionStorage.setItem('leave-times' , store);
        }

请添加图片描述