动态设置iframe高度 JavaScript

最新推荐文章于 2022-10-17 14:49:56 发布

转载最新推荐文章于 2022-10-17 14:49:56 发布 · 314 阅读

前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用JavaScript动态调整iframe元素高度的方法，确保iframe内容完全显示而无多余空白。通过监听内容加载状态并获取实际高度，实现iframe自适应布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<iframe id="mainIframe" style="width:405px;border:1px solid black;" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no" allowtransparency="yes" src="test1.html">

</iframe>

<script language="javascript">
    // 动态设置iframe高度
    var timeIframe;
    window.onload = function() {
        timeIframe = setTimeout(GetIframeStatus, 10);
    };
    function GetIframeStatus() {
        var iframe = document.getElementById("mainIframe");
        var iframeWindow = iframe.contentWindow;
        //内容是否加载完
        if (iframeWindow.document.readyState == "complete") {
            //获取Iframe的内容实际高度
            iframeHeight = iframeWindow.document.documentElement.scrollHeight;
            //设置Iframe的高度
            iframe.height = iframeHeight;
        } else {
            timeIframe = setTimeout(GetIframeStatus, 10);
        }
    }
</script>