当前位置:首页 > 建站教程 > 如何设置iframe自适应内容高度

如何设置iframe自适应内容高度

如何设置iframe自适应内容高度

iframe自适应高度问题。头疼。

上网找了下,好像没有找到十分兼容各种浏览器的东东。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <base href="<%=basePath%>">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title></title>
        <style type="text/css">
</style>
<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<minHeight){
                        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<minHeight){
                        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>
    </head>
    <body bgcolor="#E0E0E0" onload="init();">
        <center>
        <div id="topmenu">
            <IFRAME NAME="topm" width=100% height=200 frameborder=0 marginwidth=0 marginheight=0 SRC="/register/pub/top.jsp" scrolling=no
                allowTransparency="true"></IFRAME>
        </div>
        <div id="mainmenu" style="border: 1px blue solid;width: 1024px;text-align: center;">
            <div id="leftmenu" style="border: 1px green solid; float:left;width:150px;">
                <IFRAME NAME="leftm" id="leftiframe" width=100% height=100% frameborder=0 marginwidth=0 marginheight=0 SRC="/register/pub/left.jsp" scrolling=no
                    allowTransparency="true"></IFRAME>
            </div>
            <div id="rightmenu" style="border: 1px red solid;float:left;width:78%;height: 400px;">
                <IFRAME onload="SetCwinHeight(this);" NAME="rightm" width=100% height=100% frameborder=0 marginwidth=0 marginheight=0 SRC="/register/pub/right.jsp" scrolling=no
                    allowTransparency="true" align=center></IFRAME>
            </div>
        </div>
        <div id="bottommenu">
            <IFRAME NAME="bottomm" width=1002 height=73 frameborder=0 marginwidth=0 marginheight=0 SRC="/register/pub/bottom.jsp" scrolling=no
                allowTransparency="true" align=center></IFRAME>
        </div>
        </center>
</html>

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

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

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

 
最后编辑:
作者:遺莣缘
因为有梦所以执着,因为执着所以信赖,在这里停留总有一个理由…