大家好，我是你的好朋友思创斯。今天说一说iframe高度自适应方案总结[亲测有效],希望您对编程的造诣更进一步.
1. 背景
iframe能将一个网页嵌入到另一个网页中，有个缺陷是高度不能随内容而撑开，需要手动设置。
如果内容高度是动态的，就会存在问题。
在网上查了不少方案都存在一些问题，总结了一下
2. 思路
整体而言思路是：通过scrollheight获取iframe的滚动高度，动态将iframe.height设置为scrollheight即可
但是要考虑到两个问题
- 如果内容是动态改变的，就不能仅仅在window.onload后做一次高度改变
- 要考虑撑开后又高度又缩小的情况
3. 第一版代码
为了解决上述的两个问题，采用了以下办法（轮询）
- 不在window.onload后改变高度，而是跑定时器轮询，每隔一段时间执行。虽然有点笨笨的，但是目前我也没想到更好的方案
- 改变iframe.height之前先设为0
const resizeiframeheight = iframeel => {
const iframewindow = iframeel.contentwindow || iframeel.contentdocument.parentwindow
if (iframewindow.document.body) {
const height = iframewindow.document.body.scrollheight
iframeel.height = '0' // 先改为0，避免内容变小了，而高度还处于撑开的高度
iframeel.height = height 'px'
}
}
const timerid = setinterval(() => {
// 选中iframe
const iframeel = document.queryselector('#iframe')
resizeiframeheight(iframeel)
}, 200)
是否还在为ide开发工具频繁失效而烦恼，来吧关注以下公众号获取最新激活方式。亲测可用！
![iframe高度自适应方案总结[亲测有效]](/uploads/image/wpwpimages/blank.gif "iframe高度自适应方案总结[亲测有效]插图")
【正版授权，激活自己账号】：
【官方授权 正版激活】：
4. 第二版代码
按上述代码修改后会存在bug，由于height一下变为0，一下变为scrollheight，会导致滚动条无法向下滑动。
后来转变了一下思路，不能通过scrollheight去设置高度，而是去获取iframe里面主容器的高度来设置
const resizeiframeheight = iframeel => {
const iframewindow = iframeel.contentwindow || iframeel.contentdocument.parentwindow
if (iframewindow.document.body) {
// 获取主容器高度，iframe内的div容器高度是会自己撑开的
const height = iframewindow.document.queryselector('#app').offsetheight
iframeel.height = height 'px'
}
}
const timerid = setinterval(() => {
// 选中iframe
const iframeel = document.queryselector('#iframe')
resizeiframeheight(iframeel)
}, 200)
凯发k8官方旗舰厅的版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由思创斯整理,转载请注明出处：https://ispacesoft.com/163260.html