iframe内嵌网页踩坑合集

当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