当前位置：首页 > news >正文

监听页面可见性变化，并动态修改网页标题（react版）visibilitychange 事件

news 2025/9/13 8:46:28

当用户离开当前页面，会动态修改title

请添加图片描述

visibilitychange 事件

核心是跟踪页面是否处于用户可见状态，常见场景包括：

用户从当前标签页切换到其他标签页
用户从其他标签页切回当前标签页
用户最小化浏览器窗口
用户关闭浏览器窗口（关闭前触发）

关键属性：document.visibilityState
在事件处理函数中，通过 document.visibilityState 可以获取当前页面的可见状态，有三个可能的值：

visible：页面处于可见状态（用户正在查看当前页面）
hidden：页面处于隐藏状态（用户切换到了其他标签页或最小化了窗口）
prerender：页面正在预渲染（通常不可见，部分浏览器支持）

// 创建一个ref用于存储定时器ID，初始值为-1（表示无活跃定时器）
const timer = useRef(-1)// 使用useEffect设置副作用，空依赖数组表示只在组件挂载时执行一次
useEffect(() => {// 保存页面初始标题，用于后续恢复const originalTitle = document.title// 定义页面可见性变化的处理函数const handleVisibilityChange = () => {// 判断页面是否从隐藏变为可见（用户回到当前页面）if (document.visibilityState === 'visible') {// 修改标题为欢迎回来的文案document.title = '(⑅˃◡˂⑅)你回来啦'// 如果存在活跃定时器，先清除它（避免多个定时器冲突）if (timer.current) clearTimeout(timer.current)// 设置3秒后自动恢复原始标题的定时器，并保存定时器IDtimer.current = window.setTimeout(() => {document.title = originalTitle}, 3000)} else {// 页面从可见变为隐藏（用户离开当前页面）// 清除可能存在的活跃定时器if (timer.current) clearTimeout(timer.current)// 修改标题为挽留用户的文案document.title = '你别走吖(⁎⁍̴̛ᴗ⁍̴̛⁎)'}}// 给document添加visibilitychange事件监听，触发时执行处理函数document.addEventListener('visibilitychange', handleVisibilityChange)// 返回清理函数，在组件卸载时执行return () => {// 移除事件监听，防止内存泄漏document.removeEventListener('visibilitychange', handleVisibilityChange)// 恢复页面原始标题document.title = originalTitle}
}, []) // 空依赖数组：确保effect只在挂载和卸载时执行```