用JS控制IFrame的高度，让它的高度自动适应 - 轻装前行

代码：
<!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>
    <title>用JS控制IFrame的高度，让它的高度自动适应</title>
    <style type="text/css">
        .letCenter { margin: 30px auto; width: 800px; height: 50px; }
    </style>

    <script language="javascript" type="text/javascript"> 
        //输入你希望根据页面高度自动调整高度的iframe的名称的列表 
        //用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"]，可以只有一个窗体，则不用逗号。 
        //定义iframe的ID
        var iframeids = ["menuFrame"]; 
        //如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏，no表示不隐藏 
        var iframehide = "yes"; 
        function dyniframesize() {
            var dyniframe = new Array(); 
            for (var i=0; i<iframeids.length; i++) 
            { 
                if (document.getElementById) 
                { 
                    //自动调整iframe高度 
                    dyniframe[dyniframe.length] = document.getElementById(iframeids[i]); 
                    if (dyniframe[i] && !window.opera) 
                    { 
                        dyniframe[i].style.display = "block";
                        if (dyniframe[i].contentDocument && dyniframe[i].contentDocument.body.offsetHeight) {
                            //如果用户的浏览器是IE 
                            var contentDocHeight = dyniframe[i].contentDocument.body.offsetHeight;
                            dyniframe[i].height = contentDocHeight;
                        }
                        else if (dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight) {
                            //其它浏览器
                            dyniframe[i].height = dyniframe[i].Document.body.scrollHeight;
                        }
                    } 
                } 
                //根据设定的参数来处理不支持iframe的浏览器的显示问题 
                if ((document.all || document.getElementById) && iframehide=="no") 
                { 
                    var tempobj = document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i]); 
                    tempobj.style.display="block"; 
                } 
            } 
        }
        if (window.addEventListener) {
            window.addEventListener("load", dyniframesize, false);
        }
        else if (window.attachEvent) {
            window.attachEvent("onload", dyniframesize);
        }
        else {
            window.onload = dyniframesize;
        }
    </script>

</head>
<body>
    <div class="letCenter">
        <h1>
            这是主页面</h1>
    </div>
    <div style="border:solid 1px red; margin:0px 0px 0px 0px; padding:0px 0px;">
        <iframe id="menuFrame" name="menuFrame" frameBorder="0" scrolling="no" src="ControlIFrameHeight_Child.htm" width="100%"></iframe> 
    </div>
</body>
</html>
谢谢浏览！
posted on 2011-03-17 11:23 轻装前行阅读(11420) 评论(0) 收藏举报
刷新页面返回顶部