开发需求需要在 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 原文
iOS 中 h5 页面 iframe 调用高度自扩展问题及解决
猜你喜欢
转载自www.cnblogs.com/xiaohuizhang/p/9435710.html
今日推荐
周排行