js对指定ID的对象进行网页宽高适应

<!--为兼容各个IE版本,每个页面加上以下样式:html,body,form{overflow:hidden}-->


<!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 runat="server">
    <title>无标题页</title>
    <script>

/*============================*/
/* 对已有的frame进行网页宽高适应  */
/*============================*/
function iframeAutoWH(id, leftWidth, topHeight) {
    var o = document.getElementById(id);
    var onloadHandle = function () { setAutoWH(o, leftWidth, topHeight); };
    var onresizeHandle = function () { setAutoWH(o, leftWidth, topHeight); };

    if (document.all) {
        o.attachEvent('onload', onloadHandle);
        window.attachEvent('onresize', onresizeHandle);
    }
    else {
        o.addEventListener('load', onloadHandle, false);
        window.addEventListener('resize', onresizeHandle, false);
    }
}
/*============================*/
/* 对已有的div进行网页宽高适应  */
/*============================*/

function divAutoWH(id, leftWidth, topHeight) {
    var o = document.getElementById(id);
    var onloadHandle = function () { setAutoWH(o, leftWidth, topHeight); };
    var onresizeHandle = function () { setAutoWH(o, leftWidth, topHeight); };

    if (document.all) {//IE中
        window.attachEvent('onload', onloadHandle);
        window.attachEvent('onresize', onresizeHandle);
    }
    else { //firefox
        window.addEventListener('load', onloadHandle, false);
        window.addEventListener('resize', onresizeHandle, false);
    }
}
/*============================*/
/* 对Iframe中的div进行网页宽高适应  */
/*============================*/
function divInIframeAutoWH(ifrmId,id, leftWidth, topHeight) {

    var parentHandle = function () {
        var ifrm= document.getElementById(ifrmId);
        var ifrmHandle = function () {
            var win = ifrm.contentWindow;
            var o = win.document.getElementById(id);
            setAutoWH(o, leftWidth, topHeight);
        };

        if (document.all) {//IE中
            ifrm.attachEvent('onload', ifrmHandle);
            window.attachEvent('onresize', ifrmHandle);
        }
        else { //firefox
            ifrm.addEventListener('load', ifrmHandle, false);
            window.addEventListener('resize', ifrmHandle, false);
        }
    };

    if (document.all) {//IE中
        window.attachEvent('onload', parentHandle);
        window.attachEvent('onresize', parentHandle);
    }
    else { //firefox
        window.addEventListener('load', parentHandle, false);
        window.addEventListener('resize', parentHandle, false);
    }
}

function setAutoWH(obj, leftWidth, topHeight) {
    if (leftWidth > -1) obj.style.width = (document.body.clientWidth - leftWidth) + 'px';
    if (topHeight > -1) obj.style.height = (document.body.clientHeight - topHeight) + 'px';
    //iframe也可以用以下写法
//    obj.setAttribute("width", (document.body.clientWidth - leftWidth) + 'px');
//    obj.setAttribute("height", (document.body.clientHeight - topHeight) + 'px');

}

function divSetWH(id, width, height) {
    var obj = document.getElementById(id);
    if (width > -1) obj.style.width = width + 'px';
    if (height > -1) obj.style.height = height + 'px';
}

</script>
<style>.cpleft{float:left; 300px}</style>
</head>
<body>

 
<div id="cpleft" class="cpleft">左侧列表</div>
 
<div id="cpright"><iframe id="cpshow" src="admin/xpshow.aspx"></iframe></div>
 
 
 
<script>
  var lefW =document.getElementById("cpleft").clientWidth ;
  divAutoWH("cpleft", -1, 100);//设置宽高,实际宽不设置,实际高=当前网页高-100
  iframeAutoWH("cpshow", 360, 100); //排除宽高,实际宽=当前网页宽-360,实际高=当前网页高-100
  divInIframeAutoWH("cpshow", "ifrmdiv", lefW + 14, topH +14 ); //排除宽高,控制iframe里面的指定对象的宽高
</script>

</body>
</html>

原文地址:https://www.cnblogs.com/dashi/p/4034736.html