应动态创建iframe并延迟加载：dom就绪后用createelement插入，配合loading="lazy"或intersectionobserver控制时机；首屏关键内容可fetch预加载后write注入；同源需设全链路height:100%及calc(100vh-60px)，ios需监听visualviewport重算；跨域坐标需postmessage双向同步 viewport 信息，并禁用pointerevents由父页代理事件。
iframe阻塞主页面渲染怎么破
直接写<iframe src="panel.html"></iframe>会卡住整个大屏首帧渲染——浏览器解析到这个标签就暂停构建 DOM，等 iframe 内容完全加载完才继续。监控大屏要求 60fps，这种同步加载根本不可接受。
实操建议：
- 用 JavaScript 动态创建 iframe：等父页面 DOM 就绪、关键 canvas 渲染完成后再
document.createElement('iframe')并插入，避免阻塞 - 加
loading="lazy"属性（Chrome 76+ 支持），让非首屏 iframe 延迟到滚动进入视口才加载 - 对必须首屏展示的 panel，预加载其 HTML 资源：用
fetch('/panel.html')提前拉取字符串，再用iframe.contentDocument.write(html)注入，绕过网络请求阶段
同源 iframe 如何保证尺寸精准自适应
width="100%" height="100%" 在监控大屏里基本失效，因为父容器没显式高度；更糟的是 iOS Safari 横竖屏切换时 100vh 会错算地址栏高度，导致 iframe 裁剪或留白。
实操建议：
- 所有上级元素（
html、body、包裹容器）必须设height: 100%且margin: 0; padding: 0 - 用
height: calc(100vh - 60px)替代纯100vh，预留顶部状态栏高度，再通过resize+orientationchange事件动态重算 - 在 iframe 内部 JS 中监听
window.visualViewport?.onresize（iOS Safari 支持），捕获地址栏收放带来的视口变化，主动通知父页调整尺寸
跨域 iframe 里鼠标坐标怎么对得上
监控大屏常嵌第三方系统（如 SCADA 子系统），它们和主站不同源。此时 iframe.contentWindow 不可读，getBoundingClientRect() 返回的坐标是 iframe 自身视口坐标系，直接映射到父页面 canvas 上会偏移。
Claude风格HTML汇报文件
下载
生成Claude风格的精美单页HTML汇报文件。当用户需要生成"汇报"、"周报"、"月报"、"项目进度"、"复盘"、"演示"、"slide deck"、"状态报告"、"工作总结"时触发。支持6种模板：周报(weekly)、项目进度(project)、月度总结(monthly)、复盘报告(postmortem)、演示文稿(slid
实操建议：
- 子页面通过
window.parent.postMessage({type: 'cursor', x, y}, '*')主动上报鼠标位置，父页用event.origin校验来源后转换坐标 - 父页向 iframe 发送当前缩放比例和偏移量：
iframe.contentWindow.postMessage({type: 'viewport', scale, offsetX, offsetY}, origin) - 禁用 iframe 默认事件捕获：
iframe.style.pointerEvents = 'none'，只在需要交互区域叠加透明<div> 捕获事件并手动转发<h3>iframe 内内容更新卡顿的根源在哪</h3> <p>不是 iframe 本身慢，而是子页面在 <code>requestAnimationFrame里重复执行全量重绘（比如 ECharts 每帧clearRect+ 全量draw），再加上 iframe 独立的渲染管线，GPU 上下文切换开销翻倍。实操建议：
- 子页面启用 ECharts 的
useDirtyRect: true，只重绘变化区域；禁用动画：animation: false - 父页面用
IntersectionObserver监听 iframe 是否在视口内，不在时调用iframe.contentWindow.cancelAnimationFrame()暂停子页 rAF - 避免在 iframe 内使用
setInterval轮询，改用父页统一管理数据流：通过postMessage推送增量数据，子页只做局部更新
真实项目里最容易被忽略的，是 iframe 内字体渲染和 canvas DPR 适配完全独立于父页——子页必须自己获取
window.devicePixelRatio并重设 canvas 缓冲区，否则在 Mac Retina 屏上文字永远发虚，指针永远偏 2.5 度。 - 子页面启用 ECharts 的
