【開發問題】【VUE】【iframe】vue中如何讓iframe沙河高度自適應

【問題描述】

　　我在自己的代碼中要引用別人做的一個插件，因為開發不同，所以只能用<iframe>標簽來引用，因為iframe標簽你是不知道里面內容是有多少的，而且根據url不同內容多少也不一樣，這就導致了需要高度適應的問題。

　　【再說一句，各位別搬運太多別人的東西了，真的會增加很多解決問題的成本的】

【網上的坑】

　　1. 編寫和原生js一樣去操縱iframe的方法，（隱私問題，已將url刪去）

<iframe id='linkedFrame'
              hight='1000'
              width='100%'
              :src="'"
              frameborder='0'
              scrolling='auto'
              onload='this.height=1000'></iframe>

 

reinitIframe () {
  let iframe = document.getElementById('linkedFrame')
  try {
    let bHeight = iframe.contentWindow.document.body.scrollHeight
    let dHeight = iframe.contentWindow.document.documentElement.scrollHeight
    let height = Math.max(bHeight, dHeight)
    iframe.height = height > 1000 ? height : 1000
  } catch (ex) {
    console.log(ex)
  }
}

　　這種方法去通過document對象去獲取iframe標簽對象在vue中完全不適用，獲取到的是null

 

 

　　2. 在計算屬性mounted里面進行計算並賦值，也完全不行

mounted(){
  /**
    * iframe-寬高自適應顯示   
    */
  const oIframe = document.getElementById('bdIframe');
  const deviceWidth = document.documentElement.clientWidth;
  const deviceHeight = document.documentElement.clientHeight;
  oIframe.style.width = (Number(deviceWidth)-220) + 'px'; //數字是頁面布局寬度差值
  oIframe.style.height = (Number(deviceHeight)-120) + 'px'; //數字是頁面布局高度差
},

 

【解決方法】

　　既然已經在vue中了，就直接用vue中常用的高度的方法不香嘛？

　　height直接改為“auto”，bingo，解決

<iframe id='linkedFrame'
              hight='auto'
              width='100%'
              :src="'"
              frameborder='0'
              scrolling='auto'
              onload='this.height=1000'></iframe>