如果你不想使用第三方库,可以通过监听<iframe>
的onload
事件以及使用setTimeout
来检查<iframe>
的内容高度,从而实现自动调整高度的功能。这种方法不需要额外的库,但可能会稍微复杂一些。
下面举个例子,演示如何在<iframe>
加载完成后调整其高度以匹配内容的高度。
步骤 1: 创建父页面
在父页面中,我们创建一个<iframe>
,并为它添加一个onload
事件处理器来调整高度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Parent Page</title>
<style>
body, html { margin: 0; padding: 0; height: 100%; }
iframe { width: 100%; border: none; }
</style>
</head>
<body>
<iframe id="myIframe" src="child.html" frameborder="0" scrolling="auto"></iframe>
<script>
document.getElementById('myIframe').addEventListener('load', function() {
adjustIframeHeight(this);
});
function adjustIframeHeight(iframe) {
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
var height = iframeDocument.body.offsetHeight + iframeDocument.documentElement.scrollTop;
// 为了确保高度正确,我们可以多次尝试调整高度
setTimeout(function() {
iframe.style.height = height + 'px';
}, 100); // 给`<iframe>`一些时间来完成加载
}
</script>
</body>
</html>
步骤 2: 创建子页面
在子页面中,我们只需确保页面的内容能够正常显示即可。这里是一个简单的例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Child Page</title>
<style>
body, html { margin: 0; padding: 0; height: 100%; }
</style>
</head>
<body>
<div style="height: 200px; background-color: #f0f0f0;">
Some content...
</div>
<div style="height: 300px; background-color: #e0e0e0;">
More content...
</div>
<!-- 更多内容 -->
</body>
</html>
注意
- 这个方法可能需要一定的延迟来确保
<iframe>
完全加载完成。 - 使用
setTimeout
可以确保<iframe>
的内容完全加载后再进行高度调整。 - 这个方法可能在某些情况下不够精确,因为页面可能还在加载中就尝试调整高度。
- 如果
<iframe>
中的内容会动态改变高度,你可能需要监听特定事件来重新调整高度。
这种方法虽然简单,但在某些情况下可能不如使用库那么稳定可靠。如果你需要更高级的功能,比如实时调整高度或处理复杂的布局变化,建议使用专门的库,如iFrame Resizer。希望这个方法对你有所帮助!