根据iframe里面的内容高度动态设置iframe高度

最新推荐文章于 2023-12-29 12:51:09 发布

王焜棟琦

最新推荐文章于 2023-12-29 12:51:09 发布

阅读量932

点赞数

分类专栏： js

本文链接：https://blog.youkuaiyun.com/u011511086/article/details/106841093

版权

js 专栏收录该内容

79 篇文章

订阅专栏

本文介绍了一种使用JavaScript动态调整iframe元素高度的方法，确保其能够根据内部文档的实际高度进行自适应，避免了因高度固定而产生的空白区域或者滚动条。

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

<iframe  id="stageFrame"  src="/home/index" style="width:100%;min-height:600px;"></iframe>

//根据iframe里面的内容高度动态设置iframe高度
 var ifr = document.getElementById('stageFrame');
    ifr.onload = function () {
        ifr.style.height = '700px';
        var iDoc = ifr.contentDocument || ifr.contentWindow.document;
        //document.body.scrollHeight
        //var height = iDoc.documentElement.clientHeight || iDoc.body.clientHeight;
        var height = iDoc.body.scrollHeight + 100;
        //console.log(iDoc.documentElement.clientHeight, iDoc.body.clientHeight);
        ifr.style.height = height + 'px';
        console.log(height);
    }