当前位置：首页 > JavaScript

js 实现全屏

2026-03-13 15:28:40JavaScript

全屏 API 的基本使用

现代浏览器提供了 Fullscreen API，允许通过 JavaScript 控制元素进入或退出全屏模式。以下是一个简单的实现方法：

js 实现全屏

// 进入全屏
function enterFullscreen(element) {
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.webkitRequestFullscreen) { // Safari
    element.webkitRequestFullscreen();
  } else if (element.msRequestFullscreen) { // IE11
    element.msRequestFullscreen();
  }
}

// 退出全屏
function exitFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) { // Safari
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { // IE11
    document.msExitFullscreen();
  }
}

监听全屏状态变化

可以通过事件监听全屏状态的变化，例如用户按 ESC 键退出全屏时触发：

js 实现全屏

document.addEventListener('fullscreenchange', handleFullscreenChange);
document.addEventListener('webkitfullscreenchange', handleFullscreenChange); // Safari
document.addEventListener('msfullscreenchange', handleFullscreenChange); // IE

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

检查当前全屏状态

通过 document.fullscreenElement 或浏览器前缀属性检查当前是否处于全屏模式：

function isFullscreen() {
  return !!(
    document.fullscreenElement ||
    document.webkitFullscreenElement ||
    document.msFullscreenElement
  );
}

全屏按钮示例

结合 HTML 按钮实现全屏切换功能：

<button id="fullscreen-btn">切换全屏</button>
<script>
  const btn = document.getElementById('fullscreen-btn');
  btn.addEventListener('click', () => {
    if (isFullscreen()) {
      exitFullscreen();
    } else {
      enterFullscreen(document.documentElement); // 整个页面全屏
    }
  });
</script>