如何实现iframe内容自适应高度并确保跨域安全？

本文共计1076个文字，预计阅读时间需要5分钟。

本文介绍一种基于postmessage的安全、可靠方式，利用iframe根据其内部文档实际尺寸动态调整高度（及宽度），避免滚动条，同时遵循同源策略。

在 Web 开发中，iframe 常用于嵌入第三方内容或隔离页面模块。但一个常见痛点是：iframe 无法自动适配子页面内容高度——若内容高度变化（如搜索结果增多、折叠面板展开），固定高度的 iframe 会触发内部滚动条，影响用户体验和视觉一致性。

关键在于：iframe 本身无法主动控制自身尺寸，其宽高完全由父页面 DOM 属性（width/height）或 CSS 决定。尤其当 iframe 指向跨域资源时，浏览器出于安全限制（同源策略），禁止父页直接访问子页 DOM（如 iframe.contentDocument），因此传统 scrollHeight 读取方式失效。

✅ 正确解法是采用 跨域安全通信机制 window.postMessage：由子页面（iframe 内容页）主动测量自身文档尺寸，并向父页面发送结构化消息；父页面验证来源后，动态更新 iframe 元素属性。