iframe高度自适应问题

约定不等于承诺〃 2022-05-17 08:20 272阅读 0赞

今天写了一下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");
            }

注：无关代码请忽略

各位大神有什么好的解决方案，可以劳烦留言一下给小弟吗，万分感谢！

发表评论取消回复

表情：

评论列表（有 0 条评论，272人围观）

还没有评论，来说两句吧...

相关阅读

相关 iframe自适应高度

function setIframeHeight(iframe) \{ if (iframe) \{ var iframeWin

妖狐艹你老母/ 2022年09月24日 08:29/ 0 赞/ 261 阅读

相关总结iframe高度自适应，自适应子页面高度

在网上找了很多iframe的高度自适应，发现很多兼容性都不是很好，于是自己总结了一下。页面html节点上要有 <!DOCTYPE html PUBLIC "-//W3C

怼烎@/ 2022年07月24日 10:07/ 0 赞/ 306 阅读

相关 iframe 高度设置、iframe 自适应高度方法总结

所谓iframe自适应高度，就是，基于界面美观和交互的考虑，隐藏了iframe的border和scrollbar，让人看不出它是个iframe。如果iframe始终调用同一个固

拼搏现实的明天。/ 2022年07月24日 10:06/ 0 赞/ 470 阅读

相关 iframe自适应高度

[JS][]自适应高度，其实就是设置[iframe][]的高度，使其等于内嵌网页的高度，从而看不出来滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。如果内容是固定的，

落日映苍穹つ/ 2022年07月15日 15:49/ 0 赞/ 292 阅读

相关 iframe框架高度自适应

在写jsp页面时，在主页面中用到了iframe标签嵌套子页面的情况，这种情况，子页面中的内容有的多有的少，所以iframe的高度也要自动适应，在网上找到了这个方式，记录一下；

超、凢脫俗/ 2022年06月09日 13:08/ 0 赞/ 307 阅读

相关 iframe高度自适应问题

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

约定不等于承诺〃/ 2022年05月17日 08:20/ 0 赞/ 273 阅读

相关 iframe自适应高度

<iframeοnlοad="this.height=this.document.documentElement.scrollHeight"name="reportsFrame

柔光的暖阳◎/ 2022年04月14日 05:20/ 0 赞/ 339 阅读

相关 iframe高度自适应

<iframe src="index.html" onload="this.height=this.contentWindow.document.body.scrol

心已赠人/ 2022年03月17日 16:28/ 0 赞/ 351 阅读

相关 iframe自适应高度（转）

iframe自适应高度 ![此博文包含图片][sg_trans.gif](2013-04-23 17:29:49) <table> <tbody> <tr>

比眉伴天荒/ 2022年01月05日 05:51/ 0 赞/ 384 阅读

相关 iframe高度自适应

子页面头部是： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w

柔光的暖阳◎/ 2021年07月26日 12:30/ 0 赞/ 549 阅读