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文章来源地址https://www.uudwc.com/A/db1RM/

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

原文地址:https://blog.csdn.net/aj951225/article/details/122818132

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请联系站长进行投诉反馈,一经查实,立即删除!

h
上一篇 2023年09月17日 23:42
Element-Plus 学习笔记一
下一篇 2023年09月17日 23:43