父页面无法直接读取跨域iframe中的报表数据，因浏览器同源策略严格限制；唯一通用方案是报表方配合实现postMessage双向通信，且需校验origin、确保加载时机、处理动态高度等问题。
直接用 iframe 加载外部报表页面，无法读取其内部数据——这是同源策略的硬性限制，不是权限没开或代码写错了。
为什么父页面拿不到 iframe 里的报表数据
浏览器禁止跨域访问 iframe.contentDocument 或 iframe.contentWindow，哪怕报表只是多了一个子域名（如 report.example.com vs app.example.com）或协议不一致（http vs https），都会触发安全拦截。控制台报错通常是：Blocked a frame with origin "https://report.example.com" from accessing a cross-origin frame.
- 同源判断必须三者完全一致：协议、完整域名（含子域）、端口
- 即使你控制报表后端，也不能靠改前端 JS 绕过——这是浏览器层封锁
-
document.domain = 'example.com'在现代浏览器中已基本失效，且仅适用于旧版 IE 和部分特定子域场景
postMessage 是唯一通用的跨域数据通道
要让报表页面主动把数据“推”给父页，必须由报表方在自身 JS 中调用 postMessage，父页监听 message 事件接收。这不是单方面能实现的，需要报表提供方配合暴露接口。
- 报表页需在加载完成后执行：
window.parent.postMessage({type: 'report-data', payload: data}, 'https://your-app.com') - 父页监听时必须校验
event.origin，不能写成'*'，否则存在 XSS 风险 - 若报表页由第三方托管（如 Power BI、Tableau 嵌入），需确认其 SDK 是否封装了
postMessage事件（例如 Tableau 的getSummaryDataAsync()会触发回调，但需启用allow-scripts权限） - 注意消息顺序：父页应在
iframe.onload后再发送初始化指令（如postMessage({type: 'ready'})），避免报表页尚未绑定监听器
同域报表可直接调用方法，但要注意时机和作用域
如果报表页面和父页同源（比如都部署在 https://dashboard.example.com/reports/ 下），就可以跳过 postMessage，用更简洁的方式交互。
立即学习“前端免费学习笔记（深入）”；
- 报表页需显式挂载函数到
window上，例如：window.getReportData = () => fetch('/api/report').then(r => r.json()) - 父页调用前必须等 iframe 完全加载：
iframe.addEventListener('load', () => { iframe.contentWindow.getReportData().then(...); }) - 不要在
iframe.src指向 data URL 或 blob URL 时尝试访问contentWindow，这类地址会被视为跨域 - 若报表使用了模块化打包（如 Webpack + ES modules），全局函数需手动暴露：
window.MyReportAPI = { getData() { ... } }
iframe 尺寸与报表内容错位是高频隐藏问题
报表页面常含动态高度图表（如 ECharts、AntV），但父页无法跨域读取其 scrollHeight，导致 iframe 高度固定、内容被截断或出现双滚动条。
- 同域下可用
iframe.contentDocument.body.scrollHeight动态调整高度，但必须在报表 JS 渲染完成后再触发（推荐报表方 emit 自定义事件，如dispatchEvent(new CustomEvent('report-ready'))） - 跨域下只能依赖报表方通过
postMessage主动通知高度变化，例如发送{type: 'resize', height: 820} - 避免对
iframe设height: 100%，它依赖父容器有明确高度；更稳妥的是设为固定值或使用min-height+ CSSoverflow: auto - 若报表页本身未重置
<body>margin/padding，iframe 内会出现意外白边，需在报表 HTML 中加<body style="margin:0;padding:0">
真正卡住人的往往不是通信机制本身，而是报表方是否愿意、能否、以及是否正确实现了消息收发逻辑——很多 SaaS 报表平台只提供嵌入代码，却不开放数据导出通道，这时候就得换方案，比如后端代理接口或改用 API 直接拉取原始数据渲染。
