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