iframe根据内容自适应

本文介绍了一种使iframe能够根据其内部内容自适应高度的方法。通过获取文档流的高度及脱离文档流元素的高度,并利用定时器动态调整iframe的高度,实现平滑过渡。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

使用iframe的时候,往往因为高度的问题发愁,一般情况下,我们都要让iframe进行自适应才能使得页面展示体验更好,如何自适应了?首先我们要先得到资源的文档流的高度和脱离文档流的高度,便可以做到根据内容的高度进行动态改变iframe的高度,从而实现自适应。

文档流的高度很容易获取到:

let h1 = iframe.contentWindow.document.getElementById('app').scrollHeight

这里我之所以是通过根据ID获取到DOM元素,是因为我的资源页面的html和body的高宽是100%,很多时候全局样式中都会这么设置

脱离文档流的高度:

let a = iframe.contentWindow.document.body.getElementsByClassName('abc');
let h2 = 0;
for(let b of a){
    h2 += b.scrollHeight;
}

iframe的内容高度也就是:iframe.height = h1+h2;
动态改变可以利用window.setInterval([动态获取内容高度并改变iframe高度的函数],[隔多少毫秒执行一次])

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值