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

2018/08/07 10:55
阅读数 54
开发需求需要在 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 {
  width: 500px;
  height: 500px;
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
}

.demo-iframe-holder iframe {
  height: 100%;
  width: 100%;
}
</style>

<html>
<body>
    <div class="demo-iframe-holder">
        <iframe src="content.html" />
    </div>
</body>
</html>
其中 overflow-y: scroll 会裁剪在垂直方向上裁剪超过高度的内容,并把剩下内容用滚动的方式来显示,而  -webkit-overflow-scrolling: touch 属性会在浏览器中创建一个继承于 UIScrollView 的 UIWebOverflowScrollView 来处理滚动事件,同时也可以防止 div 内部的内容在滚动时,浏览器页面跟着一起滚动。

参考文章:
scroll-iframes-ios

https://www.jianshu.com/p/58ac17ac7779 原文

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部