iframe父根据子页内容动态改变高度

wstm2016

于 2019-10-12 17:03:29 发布

阅读量444

点赞数

CC 4.0 BY-SA版权

分类专栏：备忘

本文链接：https://blog.youkuaiyun.com/wstm2016/article/details/102523937

备忘专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种使IFrame自适应其父容器高度的方法，通过使用JavaScript动态调整IFrame的高度，确保其能够根据子页面的内容自动扩展。适用于不同浏览器环境，包括IE和3C。

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

<iframe name="iframe_content" id="iframe_content" width="100%" scrolling="no" onload="this.height=contentWindow.document.documentElement.scrollHeight"></iframe>

其中：

iframe适应主容器宽度：width="100%"

取消滚动条：scrolling="no"

子页撑开iframe：

onload = " this.height=contentWindow.document.documentElement.scrollHeight "
js:

function iframeHeight(id){
    try{
        var iframe = document.getElementById(id);

        //IE用attachEvent 判断子页面是否加载完成。
        if(iframe.attachEvent){

            iframe.attachEvent("onload", function(){
                iframe.height =iframe.contentWindow.document.documentElement.scrollHeight;
            });
            return;
        }else{

            //3C用onload来判断子页面是否加载完成。
            iframe.onload = function(){
                iframe.height = iframe.contentDocument.body.scrollHeight;
            };
            return;                 
        }     
    }catch(e){
        throw new Error('iframeHeight Error');
    }
}