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)
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)