iframe高度自适应问题

最新推荐文章于 2021-06-27 14:16:32 发布

qq_16055765

最新推荐文章于 2021-06-27 14:16:32 发布

阅读量613

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_16055765/article/details/81517601

本文介绍了在使用HTML静态页面和Bootstrap框架时遇到的iframe高度自适应问题，并分享了一个通过JavaScript实现的解决方案，确保iframe能够根据内容自动调整高度。

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

今天写了一下html静态页，遇到iframe高度自适应问题。本来是使用bootstrap的，看它上面的文档说直接使用它们给好样式就可以了。但是并没有达到要的效果。
最后使用了这个中方法解决了。

<div class="col-lg-10 col-md-10">
            <div class="embed-responsive embed-responsive-4by3" id="mainContent">
                <iframe class="embed-responsive-item" id="mainFrame" src="home.html" onload="javascript:iframeAutoHeight();"></iframe>
            </div>
          </div>

这里是使用js实现的，代码如下

        //iframe 高度自适应
        function iframeAutoHeight(){
            var iframe=document.getElementById("mainFrame");
            if(navigator.userAgent.indexOf("MSIE")>0||navigator.userAgent.indexOf("rv:11")>0||navigator.userAgent.indexOf("Firefox")>0){
                iframe.height=iframe.contentWindow.document.body.scrollHeight;
            }else{
                iframe.height=iframe.contentWindow.document.documentElement.scrollHeight;
            }
            iframe.style.cssText="height:"+iframe.height+"px;";
            $("#mainContent").css("height",iframe.height+"px");
            $("#menu").css("height",iframe.height+"px");
        }