Angular4/5技术问题：如何检测浏览器标签页是否处于激活状态

嘿，我之前在Angular 5项目里也碰到过这个需求，用浏览器原生的Page Visibility API就能轻松实现，这是目前最标准可靠的方案，下面给你详细拆解实现步骤：

一、基础实现（组件内直接监听） #

如果只是单个组件需要这个功能，直接在组件里监听visibilitychange事件就行，记得在组件销毁时移除监听，避免内存泄漏：

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-tab-demo',
  templateUrl: './tab-demo.component.html'
})
export class TabDemoComponent implements OnInit, OnDestroy {
  // 保存事件处理函数的引用，方便销毁时移除监听
  private visibilityHandler: () => void;

  ngOnInit() {
    this.visibilityHandler = () => {
      if (document.hidden) {
        console.log('浏览器标签页已切换到后台（失活）');
        // 这里写标签页失活时的业务逻辑，比如暂停定时器、上报埋点等
      } else {
        console.log('浏览器标签页回到前台（激活）');
        // 这里写标签页激活时的业务逻辑，比如恢复定时器、刷新数据等
      }
    };

    // 添加事件监听
    document.addEventListener('visibilitychange', this.visibilityHandler);
  }

  ngOnDestroy() {
    // 组件销毁时移除监听，防止内存泄漏
    document.removeEventListener('visibilitychange', this.visibilityHandler);
  }
}

二、封装成服务（多组件复用） #

如果多个组件都需要检测标签页状态，把逻辑封装成一个共享服务会更优雅，用RxJS的Subject来传递状态：

1. 创建标签页状态服务 #

import { Injectable, OnDestroy } from '@angular/core';
import { Subject } from 'rxjs/Subject';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class TabVisibilityService implements OnDestroy {
  private _tabVisible$ = new Subject<boolean>();
  private destroy$ = new Subject<void>();

  constructor() {
    const handleVisibilityChange = () => {
      // 用!document.hidden来表示标签页是否激活
      this._tabVisible$.next(!document.hidden);
    };

    // 绑定事件监听
    document.addEventListener('visibilitychange', handleVisibilityChange);
  }

  // 对外暴露可观察对象，组件可以订阅状态变化
  get tabVisibility$(): Observable<boolean> {
    return this._tabVisible$.asObservable();
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
    this._tabVisible$.complete();
  }
}

2. 在组件中使用服务 #

import { Component, OnInit, OnDestroy } from '@angular/core';
import { TabVisibilityService } from './tab-visibility.service';
import { takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs/Subject';

@Component({
  selector: 'app-tab-demo',
  templateUrl: './tab-demo.component.html'
})
export class TabDemoComponent implements OnInit, OnDestroy {
  private destroy$ = new Subject<void>();

  constructor(private tabVisibilityService: TabVisibilityService) { }

  ngOnInit() {
    this.tabVisibilityService.tabVisibility$
      .pipe(takeUntil(this.destroy$)) // 组件销毁时自动取消订阅
      .subscribe(isTabVisible => {
        if (isTabVisible) {
          console.log('标签页已激活');
          // 处理激活逻辑
        } else {
          console.log('标签页已失活');
          // 处理失活逻辑
        }
      });
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

三、兼容性提示 #

虽然Angular 5支持的现代浏览器基本都原生支持Page Visibility API，但如果要兼容一些旧版浏览器（比如老版Chrome/Safari），可以加上前缀判断：

// 兼容不同浏览器的属性和事件名
const hiddenProp = 'hidden' in document ? 'hidden' : 
                   'webkitHidden' in document ? 'webkitHidden' : 
                   'mozHidden' in document ? 'mozHidden' : null;
const visibilityEvent = hiddenProp?.replace('hidden', 'visibilitychange');

// 监听对应的事件
if (visibilityEvent) {
  document.addEventListener(visibilityEvent, () => {
    const isHidden = document[hiddenProp];
    // 后续逻辑和之前一致
  });
}

这个方案完全适配Angular 5的环境，我之前用它做过标签页切换时暂停/恢复视频播放的功能，非常稳定。

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