iframe自适应内容高度

最新推荐文章于 2025-07-10 16:09:19 发布

mls_l

最新推荐文章于 2025-07-10 16:09:19 发布

阅读量2w

点赞数 8

CC 4.0 BY-SA版权

分类专栏：前端文章标签： iframe

本文链接：https://blog.youkuaiyun.com/qq_28333105/article/details/91449921

前端专栏收录该内容

0 篇文章

订阅专栏

本文介绍了一种使iframe元素自适应其内容高度的方法，通过使用JavaScript监听窗口大小变化及定时调整iframe高度，确保iframe能根据内部内容自动调整，避免滚动条出现。

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

iframe

<iframe name="menuFrame" id="menuFrame" onload="reinitIframe()" style="overflow:visible;"
   	scrolling="no" height="100%" width="100%">
</iframe>

javascript

        window.onresize = function () {
            reinitIframe();
        }
        function reinitIframe(){
            var iframe = document.getElementById("menuFrame");
            try{
                var bHeight = iframe.contentWindow.document.body.scrollHeight;
                var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
                var height = Math.min(bHeight, dHeight);
                iframe.height = height+50;
                // console.log(iframe.height);
            }catch (ex){}
        }
        // 定时触发
        window.setInterval("reinitIframe()", 200);