vue iframe高度自适应 实用
iframe是vue的,在使用过程中高度根据数据实时变化,不好设置iframe的高度值。试了多种方式之后,总结了几种自适应的方式。实时刷新iframe高度变化var iframes = document.getElementsByTagName('iframe');setInterval(function() {for (var i = 0, j = iframes.length; i <
·
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)
}
},
更多推荐
已为社区贡献5条内容
所有评论(0)