JavaScript屏幕切换检测的3种实用方案

function getCurrentScreen() {
  // 获取窗口居中点坐标
  const winCenterX = window.screenX + window.innerWidth / 2;
  const winCenterY = window.screenY + window.innerHeight / 2;

  // 遍历所有屏幕寻找匹配项
  return Array.from(window.screen.availScreens || []).find(screen => {
    return (
      winCenterX >= screen.left &&
      winCenterX <= screen.left + screen.width &&
      winCenterY >= screen.top &&
      winCenterY <= screen.top + screen.height
    );
  });
}

class ScreenTracker {
  constructor() {
    this.lastScreenId = null;
    this.pollInterval = null;
  }

  startTracking(interval = 1000) {
    this.pollInterval = setInterval(() => {
      const currentScreen = getCurrentScreen();
      
      if (currentScreen?.id !== this.lastScreenId) {
        // 触发切换事件
        this.onScreenChange?.(currentScreen);
        this.lastScreenId = currentScreen?.id;
      }
    }, interval);
  }

  stopTracking() {
    clearInterval(this.pollInterval);
  }
}

// 使用示例
const tracker = new ScreenTracker();
tracker.onScreenChange = (newScreen) => {
  console.log('切换到屏幕:', newScreen.label);
  // 业务逻辑：更新UI/重载资源等
};
tracker.startTracking();

let lastFullscreenState = false;

function setupFullscreenWatcher() {
  ['fullscreenchange', 'webkitfullscreenchange', 'mozfullscreenchange']
    .forEach(event => document.addEventListener(event, checkFullscreen));

  function checkFullscreen() {
    const isFullscreen = !!(
      document.fullscreenElement ||
      document.webkitFullscreenElement ||
      document.mozFullScreenElement
    );

    if (isFullscreen !== lastFullscreenState) {
      lastFullscreenState = isFullscreen;
      // 触发全屏状态变更
      console.log(`全屏状态: ${isFullscreen ? '进入' : '退出'}`);
      // 业务逻辑: 调整界面布局/控制栏显隐等
    }
  }
}

// 手动触发全屏（兼容浏览器）
function toggleFullscreen(element = document.documentElement) {
  if (!document.fullscreenElement) {
    const request = 
      element.requestFullscreen || 
      element.webkitRequestFullscreen ||
      element.mozRequestFullScreen;
    request.call(element);
  } else {
    const exit = 
      document.exitFullscreen ||
      document.webkitExitFullscreen ||
      document.mozCancelFullScreen;
    exit.call(document);
  }
}

async function useScreenDetails() {
  if (!('getScreenDetails' in window)) return null;

  try {
    const screenDetails = await window.getScreenDetails();
    
    // 主屏幕监听
    screenDetails.addEventListener('currentscreenchange', () => {
      console.log('主屏变更:', screenDetails.currentScreen);
    });
    
    // 屏幕配置变化（拔插显示器）
    screenDetails.addEventListener('screenschange', () => {
      console.log('屏幕配置变化:', screenDetails.screens);
    });
    
    return screenDetails;
  } catch (e) {
    console.error('Screen Details API 失败:', e);
    return null;
  }
}

// 使用示例（需在安全上下文中）
useScreenDetails().then(api => {
  const currentScreen = api?.currentScreen;
  console.log('当前屏幕信息:', currentScreen);
});

class MultiScreenPresenter {
  constructor() {
    this.activeScreenId = null;
    this.screenElements = new Map(); // 存储各屏DOM元素
  }

  async init() {
    // 初始化屏幕检测
    this.screenDetector = await this.getBestDetector();
    
    // 全屏事件绑定
    document.getElementById('fullscreenBtn')
      .addEventListener('click', () => toggleFullscreen());
    
    // 屏幕切换逻辑
    this.onScreenChange = (screen) => {
      this.activateScreen(screen.id);
    };
  }
  
  async getBestDetector() {
    if ('getScreenDetails' in window) {
      const api = await useScreenDetails();
      if (api) return api;
    }
    return new ScreenTracker(); // 降级方案
  }
  
  activateScreen(screenId) {
    // 隐藏当前屏幕内容
    if (this.activeScreenId) {
      this.screenElements.get(this.activeScreenId).hidden = true;
    }
    
    // 激活新屏幕
    const nextScreenEl = this.screenElements.get(screenId);
    nextScreenEl.hidden = false;
    nextScreenEl.focus();
    
    console.log(`已激活屏幕: ${screenId}`);
    this.activeScreenId = screenId;
  }
}

// 初始化系统
const presenter = new MultiScreenPresenter();
presenter.screenElements.set('main', document.getElementById('mainContent'));
presenter.screenElements.set('present', document.getElementById('presentMode'));
presenter.init();

if (!('permissions' in navigator)) return;
const status = await navigator.permissions.query({ name: 'window-placement' });

startTracking(interval = 1000) {
  // 节流处理
  if (this.pollInterval) return;
  // ...原有逻辑
}

getDetector() {
  if (window.ScreenDetails) { /*...*/ }
  else if (window.screen.availScreens) { /*...*/ }
  else { /* 仅监听全屏状态 */ }
}