iframe 根据内容自适应高度-终极解决方案

Posted 2020-12-16 art-poet

第一中方法：

在子页面加载完毕的时候执行

parent.document.getElementById("iframe").height=0;

parent.document.getElementById("iframe").height=document.body.scrollHeight;

第二中方法：

在主页面 iframe onLoad 时间里面写

function iframeLoad()
{
    document.getElementById("iframe").height=0;
        
　　 document.getElementById("iframe").height=document.getElementById("iframe").contentWindow.document.body.scrollHeight;
}    

 

第三种方法：

使用js在页面加载完成后设置宽高度

iframe

<iframe name="menuFrame" id="menuFrame" onload="reinitIframe()" style="overflow:visible;"
       scrolling="no" height="100%" width="100%">
</iframe>

javascript

        window.onresize = function () {
            reinitIframe();
        }
        function reinitIframe(){
            var iframe = document.getElementById("menuFrame");
            try{
                var bHeight = iframe.contentWindow.document.body.scrollHeight;
                var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
                var height = Math.min(bHeight, dHeight);
                iframe.height = height+50;
                // console.log(iframe.height);
            }catch (ex){}
        }
        // 定时触发
        window.setInterval("reinitIframe()", 200);