您的位置：首页 > Web前端 > JavaScript

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

2011-12-24 13:28 399 查看

<!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; width: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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航