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