iframe 用内容撑开iframe高度
时间: 2023-11-20 22:57:20 浏览: 161
iframe自适应内容页面的高度
3星 · 编辑精心推荐
可以通过获取iframe中页面的高度来设置iframe的高度,具体方法如下:
```javascript
// 获取iframe中页面的高度
var height = document.documentElement.scrollHeight || document.body.scrollHeight;
// 设置iframe的高度
document.getElementById('iframe').height = height + 'px';
```
另外,也可以通过获取iframe内部容器的高度来设置iframe的高度,具体方法如下:
```javascript
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);
```
阅读全文