解决HTML中iframe标签在移动端不显示完整内容的问题-html教程-PHP中文网

ios中iframe滚动失效的正确解法是外层套div并设固定高度、overflow-y: scroll和-webkit-overflow-scrolling: touch，iframe设height: 100%且border: none；动态适配需js读取contentdocument高度并延迟获取；同时须确保协议一致、viewport配置正确及父容器高度显式声明。

解决html中iframe标签在移动端不显示完整内容的问题

iframe在iOS上滚动失效或内容被截断

直接给iframe设height: 100%或固定高度，在iPhone Safari里大概率白屏、滚动条消失、只显示顶部一截——这不是bug，是WebKit对iframe容器的渲染限制：它不触发原生滚动，也不自动撑高。

真正有效的解法是套一层div容器，并启用iOS专属滚动行为：

div容器必须显式设height（不能靠min-height或flex自动撑开）
加overflow-y: scroll + -webkit-overflow-scrolling: touch
iframe本身设height: 100%，且border: none避免边框干扰计算

示例结构：

<div style="height: 400px; overflow-y: scroll; -webkit-overflow-scrolling: touch;">
  <iframe src="page.html" width="100%" height="100%" frameborder="0"></iframe>
</div>

iframe高度动态适配内容实际高度

滚动不是万能解——有些场景要求内容全部展开、不出现滚动条。这时必须用JS读取子页面真实高度，但要注意：iOS下contentDocument访问受同源限制，且onload事件可能不触发。

安全写法分两步：

先检查iframe.contentDocument是否存在；不存在则监听load事件再读
优先取document.documentElement.scrollHeight， fallback 到body.scrollHeight
加setTimeout延迟100ms再读高，避开iOS下DOM未就绪的坑

关键代码片段：

function setIframeHeight(iframe) {
  if (!iframe.contentDocument) return;
  const doc = iframe.contentDocument;
  const height = Math.max(
    doc.documentElement.scrollHeight,
    doc.body.scrollHeight
  );
  iframe.style.height = height + 'px';
}
// 调用时机：iframe.onload 或 setTimeout(() => setIframeHeight(iframe), 100)