iframe标签嵌套页面时，如何让页面内的高度自适应

哈喽小伙伴们，我们在写需求的同时，会经常用到 iframe嵌入其他的子系统页面，其中最最关键的就是 iframe 的 页面高度自适应。往往前期的时候，我们没有注意，等注意到的时候 手忙脚乱的。

今天, 木鱼带大家快速的解决iframe 高度适配的问题。一👇👇👇

由于工作的保密性质，效果图 ，就不能附加了。各位可以亲自尝试，有不明白的地方，请在下方留言。

<template>      <iframe width="100%" id="content" v-bind:src="contents" scrolling="no" name="content"></iframe></template>

<script>import { getIndicate } from '../../api/home/home'export default {  data() {    return {      contents: '' // 用于iframe src    }  },  created() {    this.acceptancePlatform()  },  methods: {    acceptancePlatform() {    //封装的接口      getIndicate() .then(res => {   this.contents =     'https://1XX.XX.XXX.XXX:XXXX/data_notes/program_table?token=' + res   //调用高度适配   this.adaptiveIframe() }) .catch(() => {})    },    // iframe 高度适配    adaptiveIframe(){      //当前iframe 的ID      var iframes= document.getElementById("content");var adaptiveWeb = document.frames?document.frames["content"].document:iframes.contentDocument;    if(iframes!= null && adaptiveWeb != null) {     iframes.height = adaptiveWeb .body.scrollHeight;     //调整合适的高度位置，即可在不同的分辨率中去自动适配   if(iframes.height<1380){iframes.height=1380;     } }      }  }}</script>

爱K歌