iframe自动调整高度

svygh123

于 2024-08-20 23:46:15 发布

阅读量302

点赞数 4

分类专栏： js html+css 编程文章标签：前端 javascript html

本文链接：https://blog.csdn.net/svygh123/article/details/141301156

版权

编程同时被 3 个专栏收录

172 篇文章 3 订阅

订阅专栏

30 篇文章 0 订阅

订阅专栏

html+css

17 篇文章 0 订阅

订阅专栏

如果你不想使用第三方库，可以通过监听<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>