iframe 是做适配的,1
时间: 2023-08-11 09:31:45 浏览: 41
如果您想让iframe自适应其内部网页的高度,可以使用以下方法:
1. 使用postMessage API
在iframe内部网页中,监听父页面发送的消息,并根据消息内容设置自身的高度。具体实现如下:
在iframe内部网页中添加以下代码:
```javascript
// 监听来自父页面的消息
window.addEventListener("message", function(event) {
// 如果消息来源不是父页面,则直接返回
if (event.source !== parent) return;
// 如果消息类型不是"setIframeHeight",则直接返回
if (event.data.type !== "setIframeHeight") return;
// 获取消息中的高度值,并设置iframe的高度
var height = parseInt(event.data.height);
if (!isNaN(height)) {
document.body.style.height = height + "px";
}
});
```
在父页面中,使用以下代码发送设置iframe高度的消息:
```javascript
var iframe = document.getElementById("myIframe");
iframe.addEventListener("load", function() {
// 获取iframe内部网页的高度
var innerHeight = iframe.contentWindow.document.body.scrollHeight;
// 发送设置iframe高度的消息
iframe.contentWindow.postMessage({
type: "setIframeHeight",
height: innerHeight
}, "*");
});
```
其中,`myIframe` 是iframe的id。
2. 使用JavaScript计算高度
在父页面中,可以使用JavaScript计算iframe内部网页的高度,并设置iframe的高度。具体实现如下:
```javascript
var iframe = document.getElementById("myIframe");
iframe.addEventListener("load", function() {
// 获取iframe内部网页的高度
var innerHeight = iframe.contentWindow.document.body.scrollHeight;
// 设置iframe的高度
iframe.style.height = innerHeight + "px";
});
```
然而这种方法有一个问题:如果iframe内部网页中包含异步加载的内容,可能会导致计算出的高度不准确。因此,建议使用第一种方法进行自适应。