[iframe自适应内容高度]iframe自适应内容高度js代码

更新时间:2020-10-22    来源:js教程    手机版     字体:

【www.bbyears.com--js教程】

写个初级版的先用着吧。就几行代码。

 代码如下


   
       
       
       
       
<script type="text/javascript">
    //浏览器高度自适应
    function SetCwinHeight(iframeObj){
        var minHeight=400;//如果超过最小高度则自动变高
      if (document.getElementById){
           if (iframeObj && !window.opera){
                if (iframeObj.contentDocument && iframeObj.contentDocument.body.offsetHeight){
                    var h=iframeObj.contentDocument.body.offsetHeight;
                    if(h                         h=minHeight;
                    }
                    iframeObj.height = h;
                    document.getElementById("leftiframe").height = h;
                }else if(document.frames[iframeObj.name].document && document.frames[iframeObj.name].document.body.scrollHeight){
                    var h=document.frames[iframeObj.name].document.body.scrollHeight;
                    if(h                         h=minHeight;
                    }
                     iframeObj.height = h;
                     document.getElementById("leftiframe").height =h;
                }
           }
      }
    }
    function init(){
        var main_width=document.getElementById("mainmenu").style.width;
        var left_width=document.getElementById("leftmenu").style.width;
        var h=document.getElementById("rightmenu").style.height;
        document.getElementById("mainmenu").style.height=h;
        document.getElementById("rightmenu").style.width =parseInt(main_width)-parseInt(left_width)-5+"px";
    }
</script>
   
   
       


       
           
       
       
           
               
           
           
               
           
       
       
           
       
       

//窗体加载时获取左侧iframe的宽度,浏览器宽度-左侧=自动判断右侧rightframe的宽度,避免写死。

点击左侧菜单,相应打开右侧页面,由于右侧页面高度不一,且可能影响左侧导航丑陋,故而做了下判断。写在上面的js的SetCwinHeight方法中。

右侧导航随内容高度变化而变化,左侧导航则至少维持400的高度,避免右侧过短影响左侧显示。

本文来源:http://www.bbyears.com/wangyezhizuo/106210.html

热门标签

更多>>

本类排行