vue iframe高度自适应 实用

iframe是vue的，在使用过程中高度根据数据实时变化，不好设置iframe的高度值。试了多种方式之后，总结了几种自适应的方式。

第一种方案：实时刷新iframe高度变化

var iframes = document.getElementsByTagName('iframe');
setInterval(function() {
    for (var i = 0, j = iframes.length; i < j; ++i) {         
        iframes[i].setAttribute('height', iframes[i].contentWindow.document.body.scrollHeight);
    }
}, 1000);

第二种方案：iframe高度有变的时候通知父级

// iframe
this.$nextTick(()=>{
  parent.window.iframeChangeHeight()
})

// 父级
function iframeChangeHeight(){
 var iframes = document.getElementsByTagName('iframe');
 for (var i = 0, j = iframes.length; i < j; ++i) {
    iframes[i].setAttribute('height', iframes[i].contentWindow.document.body.scrollHeight);
 }
}

第三种方案：iframe高度有变的时候直接修改iframe高度

function iframeChangeHeight(){
  let iframes = window.parent.document.getElementsByTagName('iframe');
  for (var i = 0, j = iframes.length; i < j; ++i) {
    iframes[i].setAttribute('height', iframes[i].contentWindow.document.body.scrollHeight)
  }
},