iframe 随子页面大小变化而变化

IFrame自适应调整高度

最新推荐文章于 2025-10-26 10:40:37 发布

原创最新推荐文章于 2025-10-26 10:40:37 发布 · 2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#iframe-自适应

本文介绍了一种通过JavaScript实现的iframe自适应高度的方法。当子页面内容小于屏幕大小时，iframe按一屏显示；当内容多于一屏时，则出现滚动条。此外，该方法还实现了当子页面大小发生变化时，iframe能够自动调整高度。

子页面大小小于屏幕大小时，按一屏显示；多于一屏时，出现滚动条。子页面大小发生变化时，iframe自适应。

window.setInterval(function(){
    var bodyheight = $("#iframe").contents().find("body").height();
    var winheight=$(window).height();
    if(bodyheight>=winheight){                           
        $("#iframe").height(bodyheight);
    }
    else{
        $("#iframe").height(winheight);
    }
}, 200);