本文总结了iOS设备中iframe存在的兼容性问题，包括https页面无法内嵌http iframe，iframe宽度bug导致内容区域异常扩大，以及在轮播效果实现上的困难。针对这些问题，提出了设置iframe样式和scrolling属性，以及根据设备进行适配的解决策略。在vue项目中，还遇到了'X-Frame-Options'被设为'deny'导致的不允许嵌套错误以及https与http混合加载的限制。
当ios遇到iframe出现的问题调研
https://blog.csdn.net/qq_28292937/article/details/78853921
ios对iframe的兼容性较差
部署为https的地址，不能打开内嵌http的iframe
iOS的iframe宽度bug
iOS下的safari是按照iframe里面页面元素的全尺寸来调整iframe的大小的。
轮播效果的实现原理是将所有的幻灯片都放到一个块里面，然后设置溢出隐藏，在iOS的iframe下，结合上面第一条原因，就会将iframe撑得很大。
在iframe上设置以下样式
iframe {
width: 1px;
min-width: 100%;
*width: 100%;
}
同时设置scrolling属性为’no’。
<iframe height="950" width="100%" scrolling="no" src="Content.html"></iframe>
实际运用上
设置scrolling="no"会导致安卓机上不能滚动
需要按设备判断
vue项目下的实现代码如下
<div :class="boxClass" >
<iframe frameborder="0" :src="this.$route.query.webUrl" id
最低0.47元/天 解锁文章
扫一扫
1192
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
