原理：iframe设置高度100%，使用动态计算出iframe上一个父标签的高度，iframe高度就会自动撑开。限制是iframe只能在一个实时变化高度的窗口里面展示。
一、先看图，以此例子用了element-ui，Home.vue是父组件，Iframe.vue的页面是子组件。简单做了页面，顶部、侧边栏、底部都做了固定定位，iframe只是做嵌入，可以看到如果父级没有高度或者iframe不写死高度只会撑开一部分。
二、布局
1、打开iframe页面时需要暂时隐藏最大一级页面滚动条，使用iframe的滚动条，不然会出现两个滚动条。且最大一级滚动后，会遮挡到iframe框的内容，效果不好。（最大一级滚动条不明显可以不设置）
2、子组件 iframePage.vue，设置一个元素包住iframe，设置iframe父级标签的初始高度为500px（不设置也行），irame高度设置为100%
<div id="myIframe" style="position: 'relative';width: '100%';height: '500px';">
<iframe :src="src" width="100%" height="100%" frameborder="0" scrolling="auto"></iframe>
</div>
3、父组件home.vue的头部、底部、iframe的设置id，用于获取高度
三、计算高度，计算和监听写在父组件，这样可以方便拓展。
1、计算方式，分别获取以下高度页面可视高、顶部实际高、底部实际高，多余高度可以自己衡量。用页面可视高-顶部实际高-底部实际高-多余部分高度，用得出的高度设置给iframe标签的父级标签。
methods: {
setMyIframeHeight(){
// 页面可视高-顶部实际高-底部实际高-多余部分高度
let that = this;
this.$nextTick(() => {
let headerHeight = document.getElementById("header").offsetHeight;
let footerHeight = document.getElementById("footer").offsetHeight;
let bodyHeight = document.body.clientHeight;
let outHeight =parseFloat(bodyHeight - headerHeight - footerHeight)-5+ "px";
document.querySelector("#myIframe").style.height = outHeight;
});
}
}
2、调用、监听、释放
在mounted里面实时监听调用计算父标签 高度的方法，如此之后即使浏览器高度变化了也会再次计算，从而达到自适应。离开页面需要销毁监听，不然页面可能会出现卡顿。
mounted() {
this.setMyIframeHeight();
window.addEventListener("resize", () => this.setMyIframeHeight(), false);
},
beforeDestroy() {
window.removeEventListener("resize", this.setMyIframeHeight(), false);
},
最终效果
四、代码
父组件home.vue文章来源：https://www.toymoban.com/news/detail-726222.html
<template>
<div class="home">
<el-container>
<el-header id="header">Header</el-header>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-container>
<el-main>
<Iframe />
</el-main>
<el-footer id="footer">Footer</el-footer>
</el-container>
</el-container>
</el-container>
</div>
</template>
<script>
import Iframe from "./Iframe.vue";
export default {
name: "Home",
components: {
Iframe,
},
data() {
return {
};
},
created() {
},
mounted() {
this.setMyIframeHeight();
window.addEventListener("resize", () => this.setMyIframeHeight(), false);
},
beforeDestroy() {
window.removeEventListener("resize", this.setMyIframeHeight(), false);
},
methods: {
setMyIframeHeight(){
// 页面可视高-顶部实际高-底部实际高-多余部分高度
let that = this;
this.$nextTick(() => {
let headerHeight = document.getElementById("header").offsetHeight;
let footerHeight = document.getElementById("footer").offsetHeight;
let bodyHeight = document.body.clientHeight;
let outHeight =parseFloat(bodyHeight - headerHeight - footerHeight)-5+ "px";
console.log('获取到le',bodyHeight);
//设置iframe页面高度 因为在iframe时页面已经生成，高度无法改变，需要在iframe生成后直接设置高度
document.querySelector("#myIframe").style.height = outHeight;
});
}
}
};
</script>
<style>
body{
overflow: hidden !important;
}
.home,.el-container{
height: 100%;
}
.el-header, .el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
}
.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
}
.el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
padding: 0 !important;
}
body > .el-container {
margin-bottom: 40px;
}
.el-footer{
height: 60px;
bottom: 0;
width: 100%;
}
</style>
子组件Iframe.vue文章来源地址https://www.toymoban.com/news/detail-726222.html
<template>
<div id="myIframe" style="position: 'relative';width: '100%';height: '500px';">
<iframe src="https://element.eleme.cn/#/zh-CN" width="100%" height="100%" frameborder="0" scrolling="auto"></iframe>
</div>
</template>
<script>
export default {
data() {
return {
};
},
created() {
},
mounted() {
},
methods: {
}
};
</script>
<style scoped lang='scss'>
</style>
到了这里，关于Vue 下 iframe可不固定高度、无视跨域窗口高度自适应的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
