div中的iframe嵌套页面自适应外部div宽高

解决iframe自适应宽高

<div>
    <iframe src="https://www.baidu.com/"><iframe>
</div>

不知道大家有没有发现直接在iframe标签上写width="100%",和height="100%"并没有效果;这时候我们就应该用js动态去设置iframe标签的宽高,废话不多说直接上代码

思路:JS获取div的height和width属性,再赋值给iframe的height和width

1: 先给div设置ref属性方便获取div元素
    <div ref="father"></div>

2:在mounted()方法中获取父元素的宽高
 mounted() {
    this.iFrameHeight = window.getComputedStyle(this.$refs.father).height;
    this.iFrameWidth =  window.getComputedStyle(this.$refs.father).width;
}

3:然后把iFrameHeight 和 iFrameWidth 赋值给iframe标签
<iframe ref="iframepage" name="iframepage" :height="iFrameHeight" :width="iFrameWidth" src="https://www.baidu.com/" scrolling="no"></iframe>

以上的代码就可以解决iframe自适应div宽高了!!!!!!!

如果iframe内容超过父元素div的高可以给父元素div设置overflow: scroll;overflow-y:hidden就是可以了

有个坑就是父元素div不能设置v-if,设置以后就找不到元素报错style找不到,但是我的页面逻辑div必须得设置v-if,有没有大神指教一下,