当前位置：首页 > JavaScript

js 实现全屏

2026-02-28 22:11:27JavaScript

使用 `requestFullscreen` 方法

通过调用元素的 requestFullscreen 方法可以实现全屏。现代浏览器支持此 API，但需要处理不同浏览器的前缀。

const element = document.documentElement; // 整个页面
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); // Chrome, Safari
document.addEventListener('MSFullscreenChange', handleFullscreenChange); // IE/Edge
document.addEventListener('mozfullscreenchange', handleFullscreenChange); // Firefox

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) { // Chrome, Safari
  document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { // IE/Edge
  document.msExitFullscreen();
} else if (document.mozCancelFullScreen) { // Firefox
  document.mozCancelFullScreen();
}

检查当前全屏状态

通过 document.fullscreenElement 或带前缀的属性可以检查当前是否处于全屏状态。

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