js实现全屏功能

使用 requestFullscreen 方法

通过调用元素的 requestFullscreen 方法实现全屏功能。适用于现代浏览器，需处理前缀兼容性问题。

const element = document.documentElement; // 通常对根元素（html）使用
if (element.requestFullscreen) {
  element.requestFullscreen();
} else if (element.webkitRequestFullscreen) { // Chrome, Safari
  element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) { // IE/Edge
  element.msRequestFullscreen();
} else if (element.mozRequestFullScreen) { // Firefox
  element.mozRequestFullScreen();
}

监听全屏状态变化

通过 fullscreenchange 事件监听全屏状态变化，注意不同浏览器的事件名前缀。

document.addEventListener('fullscreenchange', handleFullscreenChange);
document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
document.addEventListener('MSFullscreenChange', handleFullscreenChange);
document.addEventListener('mozfullscreenchange', handleFullscreenChange);

function handleFullscreenChange() {
  if (document.fullscreenElement || 
      document.webkitFullscreenElement || 
      document.msFullscreenElement || 
      document.mozFullScreenElement) {
    console.log('进入全屏');
  } else {
    console.log('退出全屏');
  }
}

退出全屏模式

通过 exitFullscreen 方法退出全屏，同样需要处理浏览器前缀。

if (document.exitFullscreen) {
  document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
  document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
  document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
  document.mozCancelFullScreen();
}

检测当前全屏状态

通过 fullscreenElement 属性检测当前是否有元素处于全屏状态。

const isFullscreen = !!(
  document.fullscreenElement ||
  document.webkitFullscreenElement ||
  document.msFullscreenElement ||
  document.mozFullScreenElement
);
console.log(isFullscreen ? '全屏中' : '非全屏');

全屏 API 的兼容性封装

以下是一个兼容性封装的完整示例，包含进入、退出和状态检测功能。

const fullscreen = {
  enter: (element = document.documentElement) => {
    const methods = [
      'requestFullscreen',
      'webkitRequestFullscreen',
      'msRequestFullscreen',
      'mozRequestFullScreen'
    ];
    for (const method of methods) {
      if (element[method]) {
        element[method]();
        break;
      }
    }
  },

  exit: () => {
    const methods = [
      'exitFullscreen',
      'webkitExitFullscreen',
      'msExitFullscreen',
      'mozCancelFullScreen'
    ];
    for (const method of methods) {
      if (document[method]) {
        document[method]();
        break;
      }
    }
  },

  isActive: () => {
    return !!(
      document.fullscreenElement ||
      document.webkitFullscreenElement ||
      document.msFullscreenElement ||
      document.mozFullScreenElement
    );
  },

  toggle: (element) => {
    if (fullscreen.isActive()) {
      fullscreen.exit();
    } else {
      fullscreen.enter(element);
    }
  }
};

// 使用示例
fullscreen.enter(); // 进入全屏
fullscreen.toggle(); // 切换全屏状态