当前位置：首页 > React

react中如何获取标签页

2026-01-25 07:55:40React

在 React 中获取标签页（即浏览器标签页）的状态或信息，通常涉及监听浏览器的 visibilitychange 事件或使用 Page Visibility API。以下是实现方法：

react中如何获取标签页

监听页面可见性变化

通过 document.visibilityState 和 visibilitychange 事件，可以检测当前标签页是否被用户切换：

react中如何获取标签页

import { useEffect } from 'react';

function useTabVisibility() {
  useEffect(() => {
    const handleVisibilityChange = () => {
      if (document.visibilityState === 'visible') {
        console.log('标签页当前可见');
      } else {
        console.log('标签页被隐藏或切换');
      }
    };

    document.addEventListener('visibilitychange', handleVisibilityChange);
    return () => {
      document.removeEventListener('visibilitychange', handleVisibilityChange);
    };
  }, []);
}

// 在组件中使用
function MyComponent() {
  useTabVisibility();
  return <div>监听标签页状态</div>;
}

获取标签页的焦点状态

如果需要监听标签页是否获得焦点（而不仅仅是可见性），可以结合 window 的 focus 和 blur 事件：

useEffect(() => {
  const handleFocus = () => {
    console.log('标签页获得焦点');
  };
  const handleBlur = () => {
    console.log('标签页失去焦点');
  };

  window.addEventListener('focus', handleFocus);
  window.addEventListener('blur', handleBlur);
  return () => {
    window.removeEventListener('focus', handleFocus);
    window.removeEventListener('blur', handleBlur);
  };
}, []);

自定义 Hook 封装

将逻辑封装为自定义 Hook，方便复用：

import { useEffect, useState } from 'react';

function useTabActivity() {
  const [isTabActive, setIsTabActive] = useState(true);

  useEffect(() => {
    const handleVisibilityChange = () => {
      setIsTabActive(document.visibilityState === 'visible');
    };
    const handleFocus = () => setIsTabActive(true);
    const handleBlur = () => setIsTabActive(false);

    document.addEventListener('visibilitychange', handleVisibilityChange);
    window.addEventListener('focus', handleFocus);
    window.addEventListener('blur', handleBlur);

    return () => {
      document.removeEventListener('visibilitychange', handleVisibilityChange);
      window.removeEventListener('focus', handleFocus);
      window.removeEventListener('blur', handleBlur);
    };
  }, []);

  return isTabActive;
}

// 使用示例
function App() {
  const isTabActive = useTabActivity();
  return <div>标签页状态: {isTabActive ? '活跃' : '后台'}</div>;
}