码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-07-08 22:59:06      阅读:227      评论:0      收藏:0      [点我收藏+]

标签:定时   自适应高度   nbsp   catch   set   加载完成   doc   content   var   

第一中方法:

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

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

 

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

标签:定时   自适应高度   nbsp   catch   set   加载完成   doc   content   var   

原文地址:https://www.cnblogs.com/art-poet/p/13269559.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!