iframe高度自适应的解决方案

iframe高度自适应的解决方案

使用场景&＃xff1a;通过Iframe来解决项目嵌套问题时会碰到iframe的高度自适应的问题&＃xff1b;
正常情况下的iframe&＃xff1a;会出现一个滚动条影响美观

情况1&＃xff1a;不存在跨域情况时的解决方案

<iframe name&＃61;"outerPage" onload&＃61;"iframeload()" src&＃61;"./test.html" name&＃61;"myFrame" scrolling&＃61;"auto" frameborder&＃61;"0"id&＃61;"outerPage" :style&＃61;"{ &＃39;min-width&＃39;: &＃39;100%&＃39;, &＃39;min-height&＃39;: &＃39;100%&＃39; }"></iframe><script>function iframeload () {try {const cIframe &＃61; document.getElementById(&＃39;outerPage&＃39;)let aWindow &＃61; cIframe.contentWindowlet aWindowHeight &＃61; aWindow.document.documentElement.scrollHeightcIframe.style.height &＃61; aWindowHeight &＃43; &＃39;px&＃39;} catch (e) {//跨域获取不到throw new Error(e,&＃39;自定义错误setIframeHeight Error&＃39;)}}</script>


情况1&＃xff1a;存在跨域情况时的解决方案

//引入iframe的页面
<iframe name&＃61;"outerPage" src&＃61;"http://localhost:9006/#/home/homePage" name&＃61;"myFrame"scrolling&＃61;"no" frameborder&＃61;"0" id&＃61;"outerPage" style&＃61;"width:100%"></iframe><script>window.addEventListener(&＃39;message&＃39;, (e) &＃61;> {const cIframe &＃61; document.getElementById(&＃39;outerPage&＃39;)cIframe.style.height &＃61; e.data.text &＃43; &＃39;px&＃39;})</script>


//被引入的iframe页面:发送事件
mounted() {this.$nextTick(() &＃61;> {// 等子页面渲染好了之后&＃xff0c;获取高度setTimeout(() &＃61;> {const viewHeight &＃61; document.getElementById("app").scrollHeight;window.parent.postMessage({code: "iframeheght",text: viewHeight},"*");}, 1000);});
},