html5的全屏api

HTML5 全屏 API 详解

基本概念

HTML5 全屏 API 允许网页内容（如视频、游戏或特定元素）以全屏模式显示，覆盖浏览器的界面（如地址栏、工具栏等），全屏模式下，内容仍受浏览器安全策略限制，无法访问系统级功能。

进入全屏模式

通过调用元素的 requestFullscreen() 方法，或直接对文档调用 document.fullscreenRequest()（旧版浏览器可能需前缀，如 webkitRequestFullscreen）。

示例代码：

// 对元素启用全屏
const element = document.getElementById('video');
element.requestFullscreen()
  .then(() => {
    console.log('全屏成功');
  })
  .catch(err => {
    console.log('全屏失败:', err);
  });
// 对文档启用全屏（旧版浏览器）
document.documentElement.requestFullscreen?.();

退出全屏模式

调用 document.exitFullscreen() 或按下 Esc 键可退出全屏，需确保当前处于全屏状态。

示例代码：

document.exitFullscreen()
  .then(() => {
    console.log('退出全屏成功');
  })
  .catch(err => {
    console.log('未在全屏状态:', err);
  });

事件监听

全屏状态变化会触发 fullscreenchange 事件，用户手动退出或异常时触发 fullscreenerror 事件。

示例代码：

document.addEventListener('fullscreenchange', () => {
  console.log('全屏状态变更:', document.fullscreenElement);
});
document.addEventListener('fullscreenerror', (e) => {
  console.log('全屏错误:', e.message);
});

兼容性处理

不同浏览器的前缀差异可通过特性检测或封装函数处理。

兼容性表格：
| 浏览器 | 支持方法 | 是否需要前缀 |
|—————-|————————-|————–|
| Chrome | requestFullscreen | 无 |
| Firefox | requestFullscreen | 无 |
| Safari | webkitRequestFullscreen | 需 webkit |
| Edge | requestFullscreen | 无 |
| IE11+ | msRequestFullscreen | 需 ms |

封装示例：

function enterFullscreen(element) {
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if (element.msRequestFullscreen) {
    element.msRequestFullscreen();
  } else {
    console.warn('浏览器不支持全屏 API');
  }
}

注意事项

1. 用户触发限制：全屏请求必须由用户交互（如点击、按键）触发，不可自动执行。
2. 焦点问题：进入全屏后，元素会自动获取焦点，可能影响键盘操作。
3. 样式适配：全屏时需调整内容尺寸（如 width: 100vw），避免布局错乱。

相关问题与解答

问题 1：如何判断当前是否处于全屏状态？
解答：通过 document.fullscreenElement 属性判断，若返回值非 null，则表示当前处于全屏状态，且该值指向全屏元素。

if (document.fullscreenElement) {
  console.log('当前全屏元素:', document.fullscreenElement);
} else {
  console.log('未在全屏状态');
}

问题 2：如何在全屏模式下处理键盘事件？
解答：全屏元素会捕获键盘事件，需为其绑定事件监听，监听 keydown 事件实现自定义快捷键：

const fullscreenElement = document.fullscreenElement;
fullscreenElement.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') {
    console.log('全屏模式下按下 Enter 键');
    document.exitFullscreen(); // 退出全屏
  }
});