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 { 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 原文
本文来自博客园,作者:JeckHui;
个人主页:前端实用站点推荐; 热榜资讯早读:热榜资讯-导航;
转载请注明原文链接:https://www.cnblogs.com/xiaohuizhang/p/9435710.html