iframe内嵌网页踩坑合集_iframe img图片加载失帧-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_26833853/article/details/85268236

本文总结了iOS设备中iframe存在的兼容性问题，包括https页面无法内嵌http iframe，iframe宽度bug导致内容区域异常扩大，以及在轮播效果实现上的困难。针对这些问题，提出了设置iframe样式和scrolling属性，以及根据设备进行适配的解决策略。在vue项目中，还遇到了'X-Frame-Options'被设为'deny'导致的不允许嵌套错误以及https与http混合加载的限制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当ios遇到iframe出现的问题调研
https://blog.youkuaiyun.com/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="iframe"
            :scrolling="scrolling" marginwidth="0" marginheight="0" align="center"
            :class="iframeClass"
    ></iframe>
</div>

 data () {
    return {
        weburl: this.webUrl,
        showLoading: false,
        width: 0,
        height: 0,
        isIOS: false
    }
  },
 created(){
    if (navigator.userAgent.match(/iPad|iPhone/i)) {
        this.isIOS = true;
     }
    else{
        this.isIOS = false;
    }
  },
  mounted(){
    
  },
  activated(){
    var self = this;
    var iframe = document.getElementById("iframe");  
    self.$Loading.start();
    if (iframe && iframe.attachEvent){
        iframe.attachEvent("onload", function(){ 
            self.$Loading.start();
        });
    }else{
        iframe.onload = function(){
            if (self.isIOS) {
                return;
            }
            else{
                iframe.height = self.height; //安卓手机必须设置
            }
        }
    }
  },
  computed: {
      boxClass(){
          return this.isIOS ? "ios-scroll-wrapper" : "an-scroll-wrapper"
      },
      iframeClass(){
          return this.isIOS ? "ios-iframe" : "an-iframe"
      },
      scrolling(){
          return this.isIOS ? "no" : "auto"
      }
  },

//ios
.ios-iframe {
    position: relative;width: 1px; top: 64px;min-width: 100%; *width: 100%;
}
.ios-scroll-wrapper {
    overflow: auto;-webkit-overflow-scrolling:touch;width:100%;height:100%;
}
//an
.an-scroll-wrapper {
    -webkit-overflow-scrolling: touch;
    overflow: auto;
    position: fixed;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}
.an-iframe {
    margin-top: 64px;
    width: 100%;
    height: 100%;
    display: block;
    vertical-align: bottom;
}

报错
1.不允许嵌套
Refused to display ‘url’ in a frame because it set ‘X-Frame-Options’ to ‘deny’.
https://blog.youkuaiyun.com/yangfanj/article/details/80858831

2.https不能打开嵌套http的网址，请求http的图片也会有问题