解决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,有没有大神指教一下,