当前位置：首页 > JavaScript

js实现全屏功能

2026-02-02 14:40:49JavaScript

使用 `requestFullscreen` 方法

通过调用元素的 requestFullscreen 方法实现全屏。需注意浏览器兼容性前缀（如 webkitRequestFullscreen）。

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 事件监听全屏状态变化，兼容不同浏览器的事件名称。

js实现全屏功能

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('已退出全屏');
  }
}

退出全屏

调用 document.exitFullscreen 方法退出全屏，同样需处理浏览器前缀。

js实现全屏功能

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 ? '全屏中' : '非全屏');

全屏特定元素

将任意 DOM 元素（如视频或容器）设置为全屏目标。

const videoElement = document.getElementById('video');
if (videoElement.requestFullscreen) {
  videoElement.requestFullscreen();
} else if (videoElement.webkitRequestFullscreen) {
  videoElement.webkitRequestFullscreen();
} else if (videoElement.msRequestFullscreen) {
  videoElement.msRequestFullscreen();
} else if (videoElement.mozRequestFullScreen) {
  videoElement.mozRequestFullScreen();
}

注意事项

用户交互触发：大多数浏览器要求全屏操作必须由用户手势（如点击事件）触发，否则会被阻止。
CSS 适配：全屏元素可通过 :fullscreen 伪类定制样式，例如：
```
:fullscreen {
  background-color: black;
}
```
移动端兼容性：部分移动端浏览器可能限制全屏功能。