双击事件必须绑定在 iframe 的父容器上，不能直接绑定到 iframe 元素本身；因浏览器（尤其 Chrome/Safari）会忽略对替换元素的 dblclick 监听，需确保父容器有明确尺寸、可见性、非 static 定位，且双击回调中同步调用 container.requestFullscreen() 并添加 allowfullscreen 属性。
双击事件必须绑定在 iframe 容器上，不能只绑 iframe 元素本身
直接给 <iframe> 绑定 dblclick 事件基本无效——浏览器会忽略对替换元素（如 iframe、img）的双击事件监听，尤其在 Chrome 和 Safari 中。真实生效的是其**父容器**（比如一个 <div class="lay-dbclick-box">），且该容器需有明确尺寸和可见性。
- 确保容器设置了
position: relative或其他非static定位，否则内部绝对定位的遮罩层（如.lay-dbclick-screen）可能错位 - 容器不能是
display: none或visibility: hidden，否则后续requestFullscreen()会静默失败 - 避免用
document.querySelector('iframe').parentElement动态取父元素再绑定——DOM 尚未就绪时取到的是null，应提前写死结构或等 DOMContentLoaded 后操作
requestFullscreen() 必须由用户手势同步触发，且目标必须是可见容器
双击回调里调用 container.requestFullscreen() 是唯一可靠路径；任何异步延迟（setTimeout、Promise.then）、生命周期钩子（load、DOMContentLoaded）或媒体事件（play 回调）都会导致 NotAllowedError。
- 目标容器推荐用语义化元素（如
<main id="iframe-wrapper">），而非document.body或document.documentElement—— Safari 会拒绝后者 - 调用前加兼容判断：
if (container.requestFullscreen) { container.requestFullscreen(); }，防止旧 Safari 报undefined is not a function - iframe 自身要带
allowfullscreen属性，否则即使容器全屏，iframe 内容仍可能被限制（尤其跨域场景）
全屏状态切换后，iframe 内容常被裁切或滚动异常
进入全屏后，iframe 默认不会自动撑满视口，尤其当它嵌套在 flex/grid 容器中时，容易因父级约束导致高度塌陷或出现滚动条。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- CSS 上强制拉伸：
.iframe-wrapper { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 999999; }，不用100%（它相对父容器，不是视口） - iframe 样式补全：
iframe { width: 100%; height: 100%; border: none; display: block; }，display: block可消除底部默认留白 - 若 iframe 内页面也需响应式，建议其内部设
html, body { height: 100%; margin: 0; }，否则可能出现“全屏了但内容只占一半”
退出全屏后按钮状态不同步、iframe 尺寸没恢复
fullscreenchange 事件只在 document 上触发，且不带源元素信息，必须靠 document.fullscreenElement 实时比对来判断是否退出成功。
立即学习“前端免费学习笔记（深入）”；
- 监听写法必须是：
document.addEventListener('fullscreenchange', () => { if (document.fullscreenElement !== container) { /* 恢复容器原始 class 或 style */ } }); - Safari 下
fullscreenchange触发稍滞后，更新按钮文案或 class 建议包一层Promise.resolve().then(() => {...})避免读到旧值 - 退出逻辑别只依赖 Esc 键——用户也可能点按钮或调用
document.exitFullscreen()，所以按钮点击事件里要统一处理“进/出”状态切换，不要拆成两个独立函数
双击全屏看似简单，真正卡住人的地方从来不是 JS 行数，而是容器是否挂载、是否可见、是否在手势上下文中调用，以及退出后 CSS 状态能否干净还原。这几个点漏掉任意一个，都会表现为“点一下没反应”或“全屏了但显示不全”。
