一、使用document对象的属性设置网页窗口的大小:
网页可见区域宽:document.body.clientWidth
网页可见区域高:document.body.clientHeight
网页可见区域宽:document.body.offsetWidth (包括边线的宽)
网页可见区域高:document.body.offsetHeight (包括边线的宽)
网页正文全文宽:document.body.scrollWidth
网页正文全文高:document.body.scrollHeight
网页被卷去的高:document.body.scrollTop
网页被卷去的左:document.body.scrollLeft
网页正文部分上:window.screenTop
网页正文部分左:window.screenLeft
屏幕分辨率的高:window.screen.height
屏幕分辨率的宽:window.screen.width
屏幕可用工作区高度:window.screen.availHeight
屏幕可用工作区宽度:window.screen.availWidth
示例代码1:
View Code
<!
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
><
meta
http-equiv
="Content-Type"
content
="text/html; charset=gb2312"
/>
<
title
>无标题文档
</
title
>
</
head
>
<
body
>
<
table
width
="200"
height
="1500"
border
="1"
bgcolor
="#ccc"
>
<
tr
>
<
td
>此表格高度1500
</
td
>
</
tr
>
</
table
>
<
script
language
="javascript"
>
var
s
=
'
网页可见区域宽(clientWidth):
'
+
document.body.clientWidth;
s
+=
'
\r\n网页可见区域高(clientHeight):
'
+
document.body.clientHeight;
s
+=
'
\r\n网页可见区域高(clientHeight):
'
+
document.body.clientHeight
+
'
(包括边线的宽)
'
;
s
+=
'
\r\n网页可见区域高(clientHeight):
'
+
document.body.clientHeight
+
'
(包括边线的宽)
'
;
s
+=
'
\r\n网页正文全文宽(clientHeight):
'
+
document.body.clientHeight;
s
+=
'
\r\n网页正文全文高(clientHeight):
'
+
document.body.clientHeight;
s
+=
'
\r\n网页被卷去的高(scrollTop):
'
+
document.body.scrollTop;
s
+=
'
\r\n网页被卷去的左(scrollLeft):
'
+
document.body.scrollLeft;
s
+=
'
\r\n网页正文部分上(screenTop):
'
+
window.screenTop;
s
+=
'
\r\n网页正文部分左(screenLeft):
'
+
window.screenLeft;
s
+=
'
\r\n屏幕分辨率的高(height):
'
+
window.screen.height;
s
+=
'
\r\n屏幕分辨率的宽(width):
'
+
window.screen.width;
s
+=
'
\r\n屏幕可用工作区高度(availHeight):
'
+
window.screen.availHeight;
s
+=
'
\r\n屏幕可用工作区宽度(availWidth):
'
+
window.screen.availWidth;
alert(s);
</
script
>
</
body
>
</
html
>
在IE、FireFox、Netscape等不同的浏览器里,对于document.body 的 clientHeight、offsetHeight 和 scrollHeight 有着不同的含义,比较容易搞混,现整理一下相关的内容:
clientHeight:在上述浏览器中, clientHeight 的含义是一致的,定义为网页内容可视区域的高度,即在浏览器中可以看到网页内容的高度,通常是工具条以下到状态栏以上的整个区域高度,与具体的网页页面内容无关。可以理解为,在屏幕上通过浏览器窗口所能看到网页内容的高度。
offsetHeight:关于offsetHeight,ie和firefox等不同浏览中意义有所不同,需要加以区别。在ie中,offsetHeight 的取值为 clientHeight加上滚动条及边框的高度;而firefox、netscape中,其取值为是实际网页内容的高度,可能会小于clientHeight。
scrollHeight:scrollHeight都表示浏览器中网页内容的高度,但稍有区别。在ie里为实际网页内容的高度,可以小于 clientHeight;在firefox 中为网页内容高度,最小值等于 clientHeight,即网页实际内容比clientHeight时,取clientHeight。
clientWidth、offsetWidth 和 scrollWidth 的含义与上述内容雷同,不过是高度变成宽度而已。
若希望clientHeight、offsetHeight和scrollHeight三个属性能取值一致的话,可以通过设置DOCTYPE,启用不同的解析器,如:<!DOCTYPE HTML PUBLIC "DTD XHTML 1.0 Transitional">,设置DOCTYPE后,这三个属性都表示实际网页内容的高度。
示例代码2:
<!
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
>浏览器窗口大小
</
title
>
<
meta
http-equiv
="content-type"
content
="text/html; charset=gb2312"
></
meta
>
</
head
>
<
body
>
<
h2
align
="center"
>浏览器窗口大小
</
h2
><
hr
/>
<
form
action
="#"
method
="get"
name
="form1"
id
="form1"
>
<!--
显示浏览器窗口的实际尺寸
-->
clientHeight的值为:
<
input
type
="text"
name
="clientHeight"
size
="4"
/><
br
/>
offsetHeight的值为:
<
input
type
="text"
name
="offsetHeight"
size
="4"
/><
br
/>
scrollHeight的值为:
<
input
type
="text"
name
="scrollHeight"
size
="4"
/><
br
/>
</
form
>
<
script
type
='text/javascript'
>
window.onload
=
function
()
{
var
ch
=
document.body.clientHeight;
var
sh
=
document.body.offsetHeight;
var
ssh
=
document.body.scrollHeight;
//
结果输出
document.form1.clientHeight.value
=
ch;
document.form1.offsetHeight.value
=
sh;
document.form1.scrollHeight.value
=
ssh;
}
</
script
>
</
body
>
</
html
>
示例代码3:
<!
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
>请调整浏览器窗口
</
title
>
<
meta
http-equiv
="content-type"
content
="text/html; charset=gb2312"
></
meta
>
</
head
>
<
body
>
<
h2
align
="center"
>请调整浏览器窗口大小
</
h2
><
hr
/>
<
form
action
="#"
method
="get"
name
="form1"
id
="form1"
>
<!--
显示浏览器窗口的实际尺寸
-->
浏览器窗口的实际高度:
<
input
type
="text"
name
="availHeight"
size
="4"
/><
br
/>
浏览器窗口的实际宽度:
<
input
type
="text"
name
="availWidth"
size
="4"
/><
br
/>
</
form
>
<
script
type
="text/javascript"
>
<!--
var
winWidth
=
0
;
var
winHeight
=
0
;
function
findDimensions()
//
函数:获取尺寸
{
//
获取窗口宽度
if
(window.innerWidth)
winWidth
=
window.innerWidth;
else
if
((document.body)
&&
(document.body.clientWidth))
winWidth
=
document.body.clientWidth;
//
获取窗口高度
if
(window.innerHeight)
winHeight
=
window.innerHeight;
else
if
((document.body)
&&
(document.body.clientHeight))
winHeight
=
document.body.clientHeight;
//
通过深入Document内部对body进行检测,获取窗口大小
if
(document.documentElement
&&
document.documentElement.clientHeight
&&
document.documentElement.clientWidth)
{
winHeight
=
document.documentElement.clientHeight;
winWidth
=
document.documentElement.clientWidth;
}
//
结果输出至两个文本框
document.form1.availHeight.value
=
winHeight;
document.form1.availWidth.value
=
winWidth;
}
findDimensions();
//
调用函数,获取数值
window.onresize
=
findDimensions;
//
-->
</
script
>
</
body
>
</
html
>
二、框架页中的高度自适应:
在实际使用iframe的过程中,会遇到iframe高度的问题。由于被嵌套的页面大小不固定而出现滚动条。采用JavaScript来控制iframe元素的高度,让iframe高度自适应。另外,由于JavaScript对不同域名下权限的控制,会遇到同域、跨域的情况。
1、同域下的Iframe高度自适应
控制id为“iframeid”的iframe的高度,通过JavaScript取得被嵌套页面最终高度,然后在主页面进行设置来实现。
<script type="text/javascript">
function SetCwinHeight()
{
var iframeid=document.getElementById("iframeid");
//
iframe id
if (document.getElementById)
{
if (iframeid && !window.opera)
{
if (iframeid.contentDocument && iframeid.contentDocument.body.offsetHeight){
iframeid.height = iframeid.contentDocument.body.offsetHeight;
}
else
if(iframeid.Document && iframeid.Document.body.scrollHeight)
{
iframeid.height = iframeid.Document.body.scrollHeight;
}
}
}
}
</script>
页面框架代码:
<iframe width="100%" id="iframeid" onload="Javascript:SetCwinHeight()" height="1" frameborder="0" src="demo.html"></iframe>
2、不同域下的Iframe高度自适应
主页面与被嵌套页面不同域时,涉及到权限问题,要规避JavaScript的跨域限制。
具体操作,可参考以下资料中的实验性实例代码,可行性有待考证。
参考:①.JS获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度(http://hi.baidu.com/liuleihai/blog/item/d7f18182bb817d97f703a60a.html)
②.Iframe高度自适应(http://www.ccvita.com/376.html)