【开发问题】【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>

 

 1 reinitIframe () {
 2   let iframe = document.getElementById(\'linkedFrame\')
 3   try {
 4     let bHeight = iframe.contentWindow.document.body.scrollHeight
 5     let dHeight = iframe.contentWindow.document.documentElement.scrollHeight
 6     let height = Math.max(bHeight, dHeight)
 7     iframe.height = height > 1000 ? height : 1000
 8   } catch (ex) {
 9     console.log(ex)
10   }
11 }

　　这种方法去通过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>