javascript 全屏切换需调用 requestfullscreen() 和 exitfullscreen() api，监听 fullscreenchange 事件，并在用户交互中触发、处理 promise 及兼容性前缀。

javascript 实现全屏切换效果，核心是调用浏览器提供的 element.requestfullscreen() 和 document.exitfullscreen() api，并监听全屏状态变化来同步 ui 或逻辑。

触发全屏：调用 requestFullscreen()

要让某个元素（如视频容器、画布或整个 body）进入全屏，需在其上调用 requestFullscreen() 方法。该方法返回 Promise，成功后进入全屏；失败时会拒绝 Promise，常见原因包括：用户未主动交互触发（如不在 click 事件中）、元素不可见、被 iframe 隔离且未设置 allow="fullscreen"。

• 确保在用户手势事件（如 click、keydown）中调用，否则多数浏览器会静默拒绝
• 推荐作用于具体容器而非直接操作 document.body，避免样式意外拉伸
• 可加简单错误处理：

button.addEventListener('click', () => {
  container.requestFullscreen()
    .catch(err => console.warn('全屏请求失败:', err));
});

退出全屏：调用 exitFullscreen()

退出全屏不作用于元素，而是调用 document.exitFullscreen()。它也返回 Promise，可用于链式响应。

• 可在任意时机调用，比如按 ESC 键、点击关闭按钮、或监听到全屏状态丢失时自动清理
• 调用前建议先检查是否处于全屏状态，避免无意义调用：

if (document.fullscreenElement) {
  document.exitFullscreen();
}

监听全屏状态变化

全屏进入/退出会触发 fullscreenchange 事件，绑定在 document 上即可捕获。

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

• document.fullscreenElement 为当前全屏的元素（null 表示未全屏）
• 可根据该值更新按钮图标、隐藏控制栏、重设 canvas 尺寸等
• 注意：该事件不区分是进入还是退出，需自行判断

document.addEventListener('fullscreenchange', () => {
  if (document.fullscreenElement) {
    console.log('已进入全屏');
    toggleControls(false); // 隐藏 UI 控件
  } else {
    console.log('已退出全屏');
    toggleControls(true);
  }
});

兼容性与前缀处理（仅必要时）

现代浏览器（Chrome 71+、Firefox 64+、Safari 12.1+、Edge 79+）已统一支持标准 API。若需兼容旧版 Safari 或 Android Chrome，可按需补充前缀：

• element.webkitRequestFullscreen()（旧 Safari）
• document.webkitExitFullscreen()
• document.mozCancelFullScreen()（旧 Firefox）

实际项目中建议用标准 API + try-catch 包裹，或借助轻量工具函数封装兼容逻辑，不必手动维护多套写法。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南