iframe 根據內容自適應高度-終極解決方案

第一中方法：

在子頁面加載完畢的時候執行

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);