vue跨域iframe自适应高度

前言

项目使用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;
     }
},