浏览器中的一些问题

判断页签是否为活跃状态

判断当前页面（或标签页）是否为活跃状态（用户正在浏览该页面），可以使用浏览器提供的 document.visibilityState 和 visibilitychange 事件。

✅ 方法一：使用 document.visibilityState

if (document.visibilityState === 'visible') {
  console.log('页面处于活跃状态');
} else {
  console.log('页面非活跃（最小化、切到其他标签等）');
}

✅ 方法二：监听 visibilitychange 事件

document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'visible') {
    console.log('用户回到当前页');
  } else {
    console.log('用户离开了当前页');
  }
});

📘 document.visibilityState 状态值

状态值	含义
visible	页面在当前标签页并处于前台
hidden	页面不可见（切走标签页/最小化）
prerender	页面正在预渲染（不常见）
unloaded	页面正在卸载（极少使用）

页面关闭时执行方法，该如何做

✅ 1. beforeunload（常用于提示或清理）

window.addEventListener('beforeunload', (event) => {
  // 执行清理逻辑，如保存状态、上报日志
  console.log('页面即将关闭');

  // 可选：提示用户是否确认离开（现代浏览器多已限制此功能）
  event.preventDefault(); // 标准做法
  event.returnValue = ''; // 兼容旧版浏览器
});

⚠️ 注意

浏览器对 beforeunload 中的行为做了严格限制，不能执行异步操作（如 fetch()、setTimeout()）——它们会被忽略。

✅ 2. visibilitychange + pagehide（更可靠、支持移动端）

window.addEventListener('pagehide', () => {
  // 在页面卸载时执行（兼容性更好）
  navigator.sendBeacon('/log/close', JSON.stringify({ closed: true }));
});

• pagehide：比 beforeunload 更现代化，支持异步方法如 navigator.sendBeacon()
• sendBeacon：适合在页面关闭前发送统计、上报等请求，不会被阻断

✅ 示例：关闭页面时发送埋点日志

window.addEventListener('pagehide', () => {
  navigator.sendBeacon('/api/log', JSON.stringify({ event: 'leavePage' }));
});

🧪 对比说明

事件	支持异步	适用场景	兼容性
beforeunload	❌	提示/确认离开页面	所有主流浏览器
unload	❌	早期 API，基本淘汰	较旧浏览器
pagehide	✅	推荐，用于日志上报等清理操作	现代浏览器 ✅
visibilitychange	✅	用户切走页面也可触发	所有主流浏览器

✅ React 中的使用方式（例如：在组件卸载时）

useEffect(() => {
  const handler = () => {
    navigator.sendBeacon('/api/close', JSON.stringify({ out: true }));
  };

  window.addEventListener('pagehide', handler);
  return () => window.removeEventListener('pagehide', handler);
}, []);