如何利用Visibility API实现标签页状态切换时的Favicon圆点控制？

核心原理 #

借助浏览器原生的Page Visibility API监听标签页的活跃/非活跃状态，当标签页切换到后台（非活跃）时显示提示圆点，切回前台（活跃）时自动隐藏。

实现步骤 #

1. HTML结构

添加一个用于展示圆点的固定元素：

<!-- 标签页状态提示圆点 -->
<div id="tab-status-dot" class="hidden"></div>

2. CSS样式

设置圆点的外观与显示规则，默认隐藏，非活跃状态下显示：

#tab-status-dot {
  position: fixed;
  top: 12px;
  right: 12px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #5865F2; /* 参考Discord的蓝色圆点样式 */
  z-index: 9999;
  transition: opacity 0.2s ease;
}

/* 默认隐藏状态 */
#tab-status-dot.hidden {
  opacity: 0;
  pointer-events: none;
}

/* 非活跃状态显示 */
#tab-status-dot.visible {
  opacity: 1;
}

3. JavaScript逻辑

监听页面可见性变化事件，切换圆点的显示状态：

const statusDot = document.getElementById('tab-status-dot');

// 监听标签页可见性变化
document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    // 标签页切到后台，显示圆点
    statusDot.classList.replace('hidden', 'visible');
  } else {
    // 标签页切回前台，隐藏圆点
    statusDot.classList.replace('visible', 'hidden');
  }
});

// 页面加载时初始化状态
window.addEventListener('load', () => {
  if (document.hidden) {
    statusDot.classList.add('visible');
    statusDot.classList.remove('hidden');
  }
});

关键细节说明 #

• document.hidden：API提供的核心属性，返回true代表标签页处于非活跃状态，false代表活跃。
• visibilitychange事件：当标签页可见性发生变化时自动触发，是实现状态监听的核心。
• 样式中的transition属性让圆点的显示/隐藏带有平滑过渡，提升视觉体验。

内容的提问来源于stack exchange，提问作者Cheerio