90%的交互问题源于跨域、尺寸失控或通信断连；需用http(s)地址起服务本地调试，显式设置宽高或aspect-ratio，并通过postmessage双向通信且校验origin。
直接用 iframe 嵌统计图表，90% 的交互问题都出在跨域、尺寸失控或通信断连上——不是图表本身不支持交互，而是嵌入方式没对齐它的运行环境。
iframe src 必须是 HTTP(S) 地址，本地 file:// 会直接失败
开发时写 src="chart.html" 看似合理，但浏览器会报 net::ERR_FILE_NOT_FOUND 或 Blocked a frame from accessing a cross-origin frame。这不是图表代码错了，是协议限制：file:// 协议下 iframe 无法加载同目录 HTML。
- 本地调试必须起服务：比如终端执行
python3 -m http.server 8000，然后 iframe 的 src 改成"http://localhost:8000/chart.html" - 生产环境一律用绝对路径：
src="/assets/charts/dashboard.html"，避免因父页面 URL 变化（如路由带参数）导致 404 - 动态赋值前加判断：
if (url && (url.startsWith('http') || url.startsWith('/'))) iframe.src = url;
宽高不显式控制，图表就“看不见”
iframe 默认尺寸是 300×150 像素，且是内联元素。即使写了 width="100%" height="100%"，若父容器没设高度（比如 CSS 是 height: auto），它实际渲染高度就是 0 —— 页面上只剩一条细线或完全空白。
- 最稳方案：固定最小高度，例如
style="width: 100%; height: 600px; border: none;" - 响应式场景优先用
aspect-ratio：style="width: 100%; aspect-ratio: 16/9; height: auto;"（注意 Safari 15.4+ 才完整支持） - 如果父容器是
display: flex或grid，iframe 必须加flex: 1或明确grid-area，否则它不会撑开容器
跨域图表只能靠 postMessage 通信，别碰 contentDocument
Superset、ECharts 等嵌在不同源的图表页（比如 https://charts.example.com/embed.html），JavaScript 无法读取 iframe.contentDocument，任何 myChart.resize() 或 setOption() 都会抛 DOMException。
- 父页发消息：
iframe.contentWindow.postMessage({ type: 'resize', width: 800 }, 'https://charts.example.com') - 子页监听并校验来源：
window.addEventListener('message', e => { if (e.origin !== 'https://charts.example.com') return; /* 处理 e.data */ }) - 子页 resize 要监听自身 iframe 尺寸变化，不能只监听
window.resize—— 它和父页 window 不是同一个对象
ECharts / Plotly 在 iframe 里不自动响应缩放
图表库初始化后监听的是自己所在 window 的 resize 事件，而父页改 iframe 宽高并不会触发它。结果就是父页拉宽了，图表被横向拉伸、留白，或根本没重绘。
- 子页需用
ResizeObserver监控自身iframe元素大小变化，再调myChart.resize() - 简单 fallback：父页每次改完 iframe 尺寸后，主动 postMessage 触发子页 resize
- 若图表数据动态更新，子页还要确保 canvas 或 SVG 的
width/height属性与 CSS 显示尺寸匹配，否则像素模糊或裁切
真正卡住人的往往不是“怎么嵌”，而是“嵌完之后图表动不了”——这时候要先看控制台有没有跨域报错，再确认 iframe 是否真有渲染高度，最后检查通信消息有没有被 origin 拦截。三者缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
