JavaScript 全屏API使用入门教程（附代码示例）

如果你的JavaScript代码里经常要处理全屏API使用相关的逻辑，那这篇文章大概率能帮你省时间——有些弯路，别人走过你就不必再走了。

问题一：全屏API使用应该从哪里入手？

团队协作中，全屏API使用的用法约定要写进开发规范，避免各写各的。

了解全屏API使用的返回值约定，尤其是失败时返回什么，别让异常悄悄溜过。

问题二：全屏API使用的代码长什么样？

Fullscreen API 使用，代码如下：

async function toggleFullscreen() {
  if (!document.fullscreenElement) {
    await document.documentElement.requestFullscreen();
  } else {
    await document.exitFullscreen();
  }
}

// 监听全屏状态变化，同步按钮文案
document.addEventListener('fullscreenchange', () => {
  btn.textContent = document.fullscreenElement ? '退出全屏' : '全屏';
});

问题三：用全屏API使用要注意什么？

• 密码、密钥这类敏感信息不要硬编码在代码里，更不要提交到仓库。
• 版本号是个细节，但很多兼容性问题都是版本不匹配引起的。

把全屏API使用用好，代码质量会上一个台阶；把每个小知识点都用好，职业生涯会上一个台阶。共勉。

遇见问题加 QQ23979811 协助处理