iframe高度获取不了
时间: 2023-10-13 07:27:06 浏览: 38
如果你想要获取 iframe 的高度,可以使用 JavaScript 来获取。具体方法如下:
1. 首先获取到你的 iframe 元素,可以使用 document.getElementById() 或者其他选择器方法。
```javascript
const iframe = document.getElementById('your-iframe-id');
```
2. 然后获取 iframe 的内容窗口,使用 iframe.contentWindow 属性。
```javascript
const iframeWindow = iframe.contentWindow;
```
3. 在内容窗口中获取 iframe 的文档对象,使用 iframeWindow.document 属性。
```javascript
const iframeDocument = iframeWindow.document;
```
4. 最后获取 iframe 的高度,使用 iframeDocument.documentElement.scrollHeight 属性。
```javascript
const iframeHeight = iframeDocument.documentElement.scrollHeight;
```
注意:如果 iframe 的内容使用了异步加载或者动态修改,可能需要等待 iframe 加载完成或者内容修改完成后再获取高度。
相关问题
iframe高度为什么只增不减
iframe的高度只增不减是因为iframe是一个内嵌网页框架,它的高度是由内部内容的高度决定的。当内部内容的高度增加时,iframe会自动适应内容的高度,但是当内部内容的高度减少时,iframe并不会自动缩小高度。
这是因为iframe的高度是由内部网页的内容决定的,而浏览器无法直接获取内部网页的高度。所以当内部网页的内容发生变化时,浏览器无法感知到这种变化,导致iframe的高度无法自动缩小。
如果需要实现iframe高度的自适应,可以通过以下方法解决:
1. 使用JavaScript来获取内部网页的高度,并手动设置iframe的高度。可以通过监听内部网页内容的变化事件,然后动态调整iframe的高度。
2. 使用postMessage方法进行跨域通信,内部网页可以向父页面发送消息,包括内容的高度信息,然后父页面再根据接收到的消息来设置iframe的高度。
iframe 用内容撑开iframe高度
可以通过获取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);
```