iOS 中 h5 页面 iframe 调用高度自扩展问题及解决

开发需求需要在 h5 中用 iframe 中调用一个其他公司开发的 html 页面。

简单的插入  <iframe /> 并设置宽高后，发现在 Android 手机浏览器上打开可以正常运行，但是在 iOS 手机上会有高度问题，iframe 会扩展超过设置的高度。

查找后发现问题是出在 iOS Safari 上，对于一个 scrollable 的 iframe 元素，iOS Safari 会选择扩展 iframe 的高度来自适应其中 web 页面内容的高度。所以当页面内容超过 iframe 设置的高度时，iOS Safari 并不会像在 Android 浏览器中那样维持 iframe 的高度并在右侧显示一个拖动条，而是直接扩展 iframe 的高度。

解决方案如下：

第一种：直接将 iframe 设置成 scrolling no。
<iframe scrolling='no' />
但是这种方法会导致 iframe 中的 content 显示不全，超出 iframe 高度的部分会直接被裁剪掉。

第二种：用一个 div 包裹 iframe，并在 div 中处理滚动事件。

<style>
.demo-iframe-holder 开发需求需要在 h5 中用 iframe 中调用一个其他公司开发的 html 页面。