HTML全屏API必须由用户手势触发，禁止异步调用；需确保元素已挂载、可见且无样式遮挡，跨iframe需加allow="fullscreen"；现代浏览器统一支持无前缀requestFullscreen()并返回Promise；退出须调用document.exitFullscreen()；iOS Safari仅支持video和带allow的iframe全屏。
HTML 全屏 API 不是“调用一个函数就能全屏”，而是必须由用户手势触发，且现代浏览器对 document.documentElement.requestFullscreen() 的调用有严格限制 —— 直接在页面加载时或定时器里调用会静默失败。
为什么 requestFullscreen() 总是报错 “Failed to execute 'requestFullscreen' on 'Element'”
这个错误几乎全是权限/上下文问题，不是语法错：
- 没有用户手势（如
click、keydown）触发 —— 任何异步延迟（setTimeout、Promise.then）都会断开手势链 - 目标元素未插入 DOM（比如刚
new Div()就调用，还没appendChild） - 元素被设了
display: none或visibility: hidden，或父容器有overflow: hidden且裁剪了该元素 - 跨 iframe 调用且子帧没声明
allow="fullscreen"属性（如<iframe src="%E2%80%A6" allow="fullscreen"></iframe>）
如何正确触发全屏并兼容 Chrome/Firefox/Safari
不同浏览器前缀已基本废弃（Firefox 64+、Chrome 71+、Safari 12.1+ 均支持无前缀 requestFullscreen），但需统一处理返回 Promise 和监听状态变化：
button.addEventListener('click', () => {
const el = document.documentElement; // 或具体容器如 #video-container
if (el.requestFullscreen) {
el.requestFullscreen()
.catch(err => console.error('Fullscreen error:', err.name));
}
});
// 监听进入/退出全屏
document.addEventListener('fullscreenchange', () => {
if (document.fullscreenElement) {
console.log('已进入全屏');
} else {
console.log('已退出全屏');
}
});
注意：document.fullscreenElement 是当前全屏的元素（可能为 null），不是布尔值；不要用 document.isFullscreen（不存在）。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
退出全屏不能只靠 ESC 键 —— 必须提供显式退出按钮
ESC 键确实能退出，但移动端无 ESC，且部分嵌入场景（如 WebView）可能拦截该行为。必须主动调用 document.exitFullscreen()：
- 该方法无参数，返回 Promise，同样需
catch处理失败（比如当前根本不在全屏） - 不要重复调用：多次调用不会报错，但第二次起 resolve 空 Promise，无实际效果
- 退出后
document.fullscreenElement立即变为null，可据此同步 UI 状态（如切换按钮文字）
全屏样式适配和常见视觉陷阱
进入全屏后，浏览器会自动给 document.documentElement 加上 :fullscreen 伪类（注意不是 ::fullscreen），但各浏览器实现不一致：
- Chrome/Safari 支持
:fullscreen，Firefox 需用:-moz-full-screen（旧写法仍建议保留） - 全屏时默认会隐藏滚动条、地址栏、工具栏 —— 但你的元素如果用了
position: fixed或transform，可能因渲染层叠加导致错位 - 视频全屏（
<video></video>自带全屏按钮）和 JS 全屏是两套机制：JS 全屏不会触发video.webkitEnterFullscreen()，也不受playsinline属性影响
真正容易被忽略的是：iOS Safari 在非 <video></video> 元素上调用 requestFullscreen() 会被直接忽略，连 Promise reject 都没有 —— 它只允许 <video></video> 和 <iframe></iframe>（含 allow="fullscreen"）全屏。
