HTML与JavaScript实现网页切屏监控功能
本文介绍如何使用HTML和JavaScript监控网页切屏行为。通过监听visibilitychange事件获取页面可见状态，结合window.onblur/onfocus处理焦点切换，并利用sessionStorage记录离开次数与时间戳。文章提供了完整的代码示例，解析如何区分部分可见与完全隐藏状态，实现精确的切屏计时与统计功能。
项目概述
该项目的灵感来源于网络博客中看到的案例，作者对这种实现方式感到好奇，因此进行了探索与复现。
项目目标
- 实时监控网页的可见性状态。
- 统计用户离开页面的次数。
- 记录每次离开页面的具体时间。
实现切屏监控的核心在于利用Web API中的visibilitychange事件。
该事件用于监听页面可见性的变化，相关文档可参考MDN上的visibilitychange接口说明。
同时需要关注Document.visibilityState属性，以获取当前的页面状态值。
基本逻辑是通过监听visibilitychange事件，读取document.visibilityState的值，从而判断页面是否处于隐藏状态并执行相应操作。
document.addEventListener("visibilitychange", function() {
console.log( document.visibilityState );
});
HTML结构搭建
首先创建一个标准的HTML5页面结构，包含基本的meta标签和标题。
监控页面可见性
通过addEventListener监听visibilitychange事件，并在回调中打印document.visibilityState的值，以观察不同状态下的输出。
<!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文档，visibilityState为visible时页面可能只是部分可见（如分屏模式），此时visibilitychange事件仍会被触发，因此仅靠此API无法精准监控分屏状态。
为了更准确地判断用户是否切换了页面焦点，需要额外监控是否foucus状态，即通过window.onblur和onfocus事件来辅助判断。
window.onblur = () => {
document.title = "你居然还切屏？？？--tab1"
}
window.onfocus = () => {
document.title = "好吧，你回来了--tab1"
}
时间记录机制
引入一个布尔标志位isCut来标识是否发生了切屏或标签页切换，并在触发时保存当前的时间戳lastTime。
当用户重新回到页面时，再次触发相关逻辑，计算当前时间与lastTime的差值，从而显示切屏持续的时间。
由于切屏和重新返回可能多次发生，建议将记录时间和计算差值的逻辑封装为独立的函数，以便复用。
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来存储离开次数，因为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);
}
本文介绍了利用HTML和JavaScript实现网页切屏监控的方法，涵盖了状态监听、时间记录及次数统计。如需了解更多JS监控切屏相关内容，可搜索本站往期文章或继续阅读后续教程，感谢大家的支持！
JS在setTimeout或Ajax回调中打开新标签页失败怎么处理
2026-11-05 15:50:12
JS直播协议选型：HLS、FLV与WebRTC的延迟与兼容性对比
2026-11-05 12:16:14
JS实现回到顶部：scrollTop赋值与浏览器兼容性处理
2026-11-04 23:43:35
JS使用classList动态添加、移除和切换CSS类名
2026-11-04 23:40:58
在 D3.js 中实现平滑过渡动画的技巧
2026-11-03 23:46:09