iframe高度自适应
时间: 2023-07-17 07:59:18 浏览: 107
iframe 自适应高度
3星 · 编辑精心推荐
要实现iframe的自适应高度,可以通过以下步:
1. 首先的内容页面中添加JavaScript代码,用于计算iframe的内容高度并发送给父页面:
```
function resizeIframe() {
iframe = window.parent.document('your-iframe-id');
if (iframe) {
iframe.style.height document.documentElement.scrollHeight + 'px';
}
}
```
2. 然后,在iframe的内容页面中监听窗口大小变化事件,并在事件触发时调用resizeIframe函数:
```javascript
window.addEventListener('resize', resizeIframe);
```
3. 接下来,在父页面中添加以下代码,用于设置iframe的高度和加载完成后自动调用resizeIframe函数:
```javascript
function setIframeHeight(iframeId) {
var iframe = document.getElementById(iframeId);
if (iframe) {
iframe.onload = function() {
resizeIframe();
};
iframe.style.height = '0px';
iframe.contentWindow.scrollTo(0, 0);
}
}
```
4. 最后,在父页面中调用setIframeHeight函数并传入iframe的id:
```javascript
setIframeHeight('your-iframe-id');
```
这样,当iframe的内容高度发生变化时,父页面会自动调整iframe的高度以适应内容。
阅读全文