移动端iframe自适应高度技巧

移动端 iframe 自适应高度不能依赖传统的 padding-bottom 百分比方案，因为它仅基于父容器宽度生成固定比例占位，完全无法响应子页面真实内容高度变化（尤其是动态加载、软键盘弹出等场景）；真正可靠的做法是通过 JavaScript 动态获取子页 scrollHeight 并实时设置 iframe 高度——同源时监听 onload 读取 contentDocument，跨域时则借助 postMessage 安全通信并严格校验 origin，同时需在子页 DOM 就绪后主动上报、监听关键交互事件重发高度，并用 requestAnimationFrame 平滑更新，才能彻底解决 iOS 和安卓 WebView 中因软键盘、渲染延迟等导致的高度错位与失效问题。

移动端 iframe 用 padding-bottom 百分比占位为什么不行

它根本不能让 iframe 高度「跟随内容」——padding-bottom 是基于父容器宽度的固定比例值，和子页面实际内容高度毫无关系。你设 padding-bottom: 56.25%（16:9），只是在父盒子里撑出一个固定高宽比的空白区，iframe 本身仍会按默认 150px 或 CSS 设置的 height 渲染，内容溢出照样滚动，或底部留白。

padding-bottom + position: absolute 组合只适用于静态高度场景

这种写法常见于视频嵌入、固定比例图表等已知尺寸的内容，比如：

div.iframe-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
}
iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

但它有明确前提：

• 子页面内容高度必须是静态、可预估的（比如一张图、一段定高文字）
• 不能有动态加载、折叠展开、输入框唤起键盘等导致高度变化的行为
• 移动端软键盘弹出会压缩 viewport 高度，padding-bottom 不会重算，必然错位

真正适配内容高度，必须靠 JavaScript 动态读取

移动端 iframe 自适应只有一条可靠路径：用 JS 获取子页面真实内容高度，并设给 iframe 的 style.height。但必须区分两种情况：

同源时（src 和父页协议/域名/端口一致）：

• 监听 iframe.onload，再读 iframe.contentDocument.body.scrollHeight
• 加 Math.max(scrollHeight, 300) 防止空内容塌陷
• 子页 body 要重置 margin: 0; padding: 0;，否则 scrollHeight 多出默认边距

跨域时（比如嵌第三方活动页）：

• 子页用 window.parent.postMessage({ type: 'iframeHeight', height: document.body.scrollHeight }, 'https://yourdomain.com')
• 父页监听 message，严格校验 event.origin === 'https://yourdomain.com'
• 收到后设 iframe.style.height = data.height + 'px'

移动端特别注意软键盘和 resize 事件失效问题

iOS Safari 和部分安卓 WebView 中，软键盘弹出会触发 resize，但不会触发 iframe 内容重排；用户收起键盘后，scrollHeight 可能没更新。此时不能只依赖 onload：

• 子页在 DOMContentLoaded 后发一次高度，再监听 input、focus 等事件，在关键交互后主动重发
• 父页收到消息后，用 requestAnimationFrame 延迟设置高度，避开渲染抖动
• 避免用 setInterval 轮询——耗电、卡顿、iOS 后台标签页会暂停执行

最易被忽略的是：子页发消息时没等 DOM 完全就绪，scrollHeight 拿到的是 0；或者父页没清空旧定时器，多个 iframe 共存时互相干扰。这些细节一漏，整个自适应就断在第一步。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~