iframe高度自适应方案总结

1. 背景

iframe能将一个网页嵌入到另一个网页中，有个缺陷是高度不能随内容而撑开，需要手动设置。

如果内容高度是动态的，就会存在问题。

在网上查了不少方案都存在一些问题，总结了一下

2. 思路

整体而言思路是：通过scrollHeight获取iframe的滚动高度，动态将iframe.height设置为scrollHeight即可

但是要考虑到两个问题

1. 如果内容是动态改变的，就不能仅仅在window.onload后做一次高度改变
2. 要考虑撑开后又高度又缩小的情况

3. 第一版代码

为了解决上述的两个问题，采用了以下办法（轮询）

1. 不在window.onload后改变高度，而是跑定时器轮询，每隔一段时间执行。虽然有点笨笨的，但是目前我也没想到更好的方案
2. 改变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)