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.csdn.net/yangfanj/article/details/80858831

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