前言

项目使用iframe引入百度页面，要做iframe自适应宽高。

开始

如果可以约定好，用postmessage传过来页面高度，那就可以直接设置了。
如果未约定传送页面高度，可以自行获取。
本例中：
1、由于跨域iframe加载较慢，给父元素加loading效果;
2、由于iframe页面是等比例缩小或者放大适应到本页面的，所以获取到实际宽高之后，要根据页面宽度算出高度。
（iframe显示高度 = 页面宽度 / iframe实际宽度 x iframe实际高度）

html:

<div ref="content" v-loading="loading"> <iframe id="ifm" :src="flowSrc" @load="adjustIframe" style="min-height:300px; width:100%;border:0;"></iframe>
</div>

javescript:

mounted(){this.loading = true;
},
methods:{adjustIframe() {var ifm = document.getElementById("ifm");// 实际高度let height = document.documentElement.clientHeight;// 实际宽度let width = document.documentElement.clientWidth;// 父元素的宽度const contentWidth = this.$refs.content.offsetWidth; // iframe显示宽度：为了不出现横向滚动条，保险起见，减去10像素ifm.width = Number(contentWidth) - 10;// iframe显示高度：加上80像素，增加页面下方留白，看起来更舒适ifm.height = Number(height * ifm.width / width) + 80;// 加载完成后去掉加载效果this.loading = false;}
},