当前位置：首页 > JavaScript

全屏实现js

2026-04-05 20:10:01JavaScript

全屏实现js

全屏实现 JavaScript 方法

使用 `requestFullscreen` API

document.documentElement.requestFullscreen().catch(err => {
  console.error('全屏请求失败:', err);
});

监听全屏状态变化

document.addEventListener('fullscreenchange', () => {
  if (document.fullscreenElement) {
    console.log('已进入全屏模式');
  } else {
    console.log('已退出全屏模式');
  }
});

退出全屏

document.exitFullscreen().catch(err => {
  console.error('退出全屏失败:', err);
});

检查当前全屏状态

if (document.fullscreenElement) {
  console.log('当前处于全屏模式');
} else {
  console.log('当前未处于全屏模式');
}

兼容性处理

function toggleFullscreen() {
  if (!document.fullscreenElement) {
    const element = document.documentElement;
    if (element.requestFullscreen) {
      element.requestFullscreen();
    } else if (element.webkitRequestFullscreen) {
      element.webkitRequestFullscreen();
    } else if (element.msRequestFullscreen) {
      element.msRequestFullscreen();
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
  }
}

全屏样式建议

:-webkit-full-screen {
  width: 100%;
  height: 100%;
  background: white;
}

:-moz-full-screen {
  width: 100%;
  height: 100%;
  background: white;
}

:-ms-fullscreen {
  width: 100%;
  height: 100%;
  background: white;
}

:fullscreen {
  width: 100%;
  height: 100%;
  background: white;
}