17370845950

HTML5 Fullscreen API可用于控制元素全屏，需先检测document.fullscreenEnabled支持性，通过requestFullscreen()进入全屏，exitFullscreen()退出，并监听fullscreenchange事件获取状态变化，注意兼容前缀及用户手势触发限制。

HTML5 提供了 Fullscreen API，允许开发者将页面中的某个元素或整个页面切换到全屏模式，提升用户体验。这个功能常用于视频播放、游戏、演示文稿等场景。下面介绍如何使用 Fullscreen API 实现全屏的进入与退出控制。

检测全屏支持与状态

在调用全屏方法前，建议先检查当前浏览器是否支持 Fullscreen API，并获取当前全屏状态。

可以通过以下方式判断支持情况：

• document.fullscreenEnabled：表示浏览器是否支持全屏模式。
• document.fullscreenElement：返回当前处于全屏状态的元素，若无则返回 null。

进入全屏模式

要让某个元素进入全屏，调用其 requestFullscreen() 方法即可。

示例：点击按钮使页面主体进入全屏

const elem = document.documentElement; // 获取页面根元素
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) { / Safari /
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { / IE11 /
elem.msRequestFullscreen();
}
}

你可以将该函数绑定到按钮的点击事件上。

退出全屏模式

使用 exitFullscreen() 方法可退出全屏状态。

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

此方法无需指定元素，直接通过 document 调用即可。

监听全屏状态变化

可通过监听 fullscreenchange 事件来响应全屏状态的切换。

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

同样，为了兼容性，可能需要监听 webkitfullscreenchange 或 msfullscreenchange 等前缀事件。

基本上就这些。掌握这几个核心方法和事件，就能实现稳定的全屏切换控制。注意权限限制：部分浏览器要求用户手势（如点击）才能触发全屏，不能由脚本自动执行。