iframe高度自适应子页面

最新推荐文章于 2020-08-21 19:15:06 发布

夕降巫咸

最新推荐文章于 2020-08-21 19:15:06 发布

阅读量419

点赞数 1

分类专栏：前端 JS

本文链接：https://blog.csdn.net/changeable0127/article/details/99406869

版权

JS 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

前端

7 篇文章 1 订阅

订阅专栏

本文分享了一种解决iframe在包含高度动态变化内容（如bootstrapTable）时的高度调整问题的方法。通过动态判定iframe页面高度，确保了iframe能够自适应内容高度，避免页面遮挡，提升页面美观度。

摘要由CSDN通过智能技术生成

最新做的项目采用的iframe，但是在使用bootstrapTable这类高度动态变化时，iframe的高度要么太高要么太低导致页面被遮挡，而且页面也不美观。网上也找了很多方案但是结果都是不太理想，结合其他人的经验总结下自己的这个方法。

        //动态判定iframe页面高度
        function setIframeHeight() {
            var iframe = document.getElementById('mainFrame');// mainFrame为当前的iframe的id
            if (iframe) {
                var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
                if (iframeWin.document.body) {
                    iframe.height = iframeWin.document.body.scrollHeight || iframeWin.document.documentElement.scrollHeight;
                }
            }
        };
        window.onload = function () {
            setIframeHeight(); 
        };
        window.setInterval("setIframeHeight()", 200);