Vue 下 iframe可不固定高度、无视跨域窗口高度自适应

原理：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

<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

<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>