360企业自助建站,2015年做那些网站能致富,网站 详细设计,帮别人设计做关于图的网站前言
项目使用iframe引入百度页面#xff0c;要做iframe自适应宽高。
开始
如果可以约定好#xff0c;用postmessage传过来页面高度#xff0c;那就可以直接设置了。 如果未约定传送页面高度#xff0c;可以自行获取。 本例中#xff1a; 1、由于跨域iframe加载较慢要做iframe自适应宽高。
开始
如果可以约定好用postmessage传过来页面高度那就可以直接设置了。 如果未约定传送页面高度可以自行获取。 本例中 1、由于跨域iframe加载较慢给父元素加loading效果; 2、由于iframe页面是等比例缩小或者放大适应到本页面的所以获取到实际宽高之后要根据页面宽度算出高度。 iframe显示高度 页面宽度 / iframe实际宽度 x iframe实际高度
html:
div refcontent v-loadingloading iframe idifm :srcflowSrc loadadjustIframe stylemin-height:300px; width:100%;border:0;/iframe
/divjavescript:
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;}
},
