iframe宽度高度的自适应的问题

最新推荐文章于 2024-09-29 16:33:00 发布

原创最新推荐文章于 2024-09-29 16:33:00 发布 · 3.1k 阅读

1 ·

CC 4.0 BY-SA版权

jquery + js + ajax 专栏收录该内容

33 篇文章

订阅专栏

本文介绍了一种解决iframe在div中无法实现100%自适应高度的问题的方法。通过使用JavaScript动态调整iframe的高度，确保其能够根据内容变化而自动调整大小。

iframe嵌套在div内，iframe的宽高都设置了100% ，可是还是无法自适应，解决方法如下：

代码：通过红色位置可以解决

function setIframeHeight(iframeId){  
    var cwin = document.getElementById(iframeId);   
    if (document.getElementById){  
        if (cwin && !window.opera){  
            if (cwin.contentDocument && cwin.contentDocument.body.offsetHeight){  
                cwin.height = cwin.contentDocument.body.offsetHeight + 20; //FF NS   
            }  
            else if(cwin.Document && cwin.Document.body.scrollHeight){  
                cwin.height = cwin.Document.body.scrollHeight + 10;//IE   
            }  
        }else{  
            if(cwin.contentWindow.document && cwin.contentWindow.document.body.scrollHeight)   
            cwin.height = cwin.contentWindow.document.body.scrollHeight;//Opera   
        }  
    }   
};

window.onload=function(){
var a=document.body.clientHeight-182; //取得iframe框架的实际宽度
document.getElementById("right").style.height=a+"px";
}

<div id="right" class="col-sm-10  animated fadeInRight">
<iframe id="cmsArticleContent" name="cmsArticleContent" 
src="${ctx}/cms/cmsArticle/list?did=&parentIds=&websiteID=&websiteName=&websiteType=&websiteUnitID="
onload="setIframeHeight(cmsArticleContent);" width="100%" height="100%" frameborder="0" scrolling="no"></iframe>
</div>