html全屏退出必须调用document.exitfullscreen()，esc键是唯一原生支持方式；需检查document.fullscreenelement状态、统一调用主体、确保iframe含allow="fullscreen"属性。
HTML 全屏退出必须调用 document.exitFullscreen()
浏览器不会自动响应 Esc 键以外的退出行为，哪怕你监听了 keydown 也得手动触发退出 API。Esc 键是唯一原生支持的退出方式，但用户可能没按它，或者你在自定义按钮里需要主动退出——这时候绕不开 document.exitFullscreen()。
常见错误现象：element.requestFullscreen() 成功后，点击按钮却没反应；控制台报错 TypeError: document.exitFullscreen is not a function（旧版 Chrome 用 cancelFullScreen，Firefox 早期用 mozCancelFullScreen）。
- 必须先检查全屏状态：
document.fullscreenElement不为null才能调用退出 - 兼容写法要兜底：
document.exitFullscreen?.() || document.webkitExitFullscreen?.() || document.msExitFullscreen?.() - 不能在非用户手势（如
setTimeout或 AJAX 回调）中调用，否则被浏览器静默拒绝
Esc 键退出是浏览器强制行为，无法禁用或拦截
只要页面处于全屏状态，按下 Esc 就会无条件退出，且这个过程不触发任何 JavaScript 事件（keydown、keyup 在退出瞬间收不到）。别试图用 event.preventDefault() 拦住 Esc——它对全屏退出无效。
使用场景：你想在退出前保存状态或弹确认框？不行。Esc 是系统级操作，JS 无权干预。唯一可行路径是提前监听 fullscreenchange 事件，在它触发后立刻处理退出后的逻辑。
document.addEventListener('fullscreenchange', () => { if (!document.fullscreenElement) { /* 已退出 */ } })- 注意该事件在 Chrome/Firefox 中可能触发两次（进入和退出各一次），需靠
document.fullscreenElement判定方向 - 移动端 Safari 不支持键盘，Esc 无效，必须依赖用户手势 +
exitFullscreen()
自定义退出按钮必须绑定到当前全屏元素或 document
调用 exitFullscreen() 的主体必须与进入全屏时的主体一致。如果你用 videoEl.requestFullscreen() 进入，那么退出时 videoEl.exitFullscreen() 才最稳妥；若用 document.documentElement.requestFullscreen()，就得用 document.exitFullscreen()。
容易踩的坑：混用主体。比如用 div 元素进入全屏，却在按钮里调用 document.exitFullscreen() —— 多数浏览器会失败，尤其 Safari。
- 推荐统一用
document主体：document.documentElement.requestFullscreen()+document.exitFullscreen() - 按钮点击 handler 中加防护：
if (document.fullscreenElement) document.exitFullscreen() - 避免在 Shadow DOM 内调用，部分浏览器不识别其内部元素的全屏状态
全屏 API 在 iframe 中默认被禁用
如果页面嵌在 iframe 里，且没有显式声明 allow="fullscreen"，requestFullscreen() 会直接抛错：Failed to execute 'requestFullscreen' on 'Element': The element's owner document is not fully active.
这不是 JS 写错了，是安全策略卡死。即使父页加了权限，子 iframe 仍需自己声明。
- 确保 iframe 标签带属性：
<iframe src="..." allow="fullscreen"></iframe> - 若用
iframe.contentWindow.document操作，全屏主体必须是该 iframe 内的元素，且权限已开启 - 第三方平台（如微前端、CMS 嵌入）常忽略此配置，测试时务必检查 iframe 的实际 HTML 属性
全屏退出看着简单，真正卡住人的地方就两个：一个是退出 API 的调用主体不匹配，另一个是 iframe 权限漏配。这两处一错，控制台几乎不报明确错误，只静默失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
