iframe标簽嵌套頁面時，如何讓頁面内的高度自适應

哈喽小夥伴們，我們在寫需求的同時，會經常用到 ​

​iframe嵌入其他的子系統頁面​

​​，其中​

​最最關鍵的就是 iframe 的 頁面高度自适應​

​。往往前期的時候，我們沒有注意，等注意到的時候 手忙腳亂的。

今天, 木魚帶大家​

​快速的解決iframe 高度适配​

​的問題。一👇👇👇

<template>
     <!--v-bind:src="contents" 為動态綁定的位址-->
   <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>