本文介绍一种基于 postmessage 的安全、可靠方式,使 iframe 根据其内部文档实际尺寸动态调整高度(及宽度),避免滚动条,同时严格遵循同源策略与跨域通信规范。
在 Web 开发中,iframe 常用于嵌入第三方内容或隔离页面模块。但一个常见痛点是:iframe 无法自动适配子页面内容高度——若内容高度变化(如搜索结果增多、折叠面板展开),固定高度的 iframe 会触发内部滚动条,影响用户体验和视觉一致性。
关键在于:iframe 本身无法主动控制自身尺寸,其宽高完全由父页面 DOM 属性(width/height)或 CSS 决定。尤其当 iframe 指向跨域资源时,浏览器出于安全限制(同源策略),禁止父页直接访问子页 DOM(如 iframe.contentDocument),因此传统 scrollHeight 读取方式失效。