dudumao

活得诚实,活得正直,专注极致,追随热情,忠于自我

  :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
  113 随笔 :: 1 文章 :: 35 评论 :: 0 引用

一、使用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)

   ③.关于iframe页面高度自适应的问题(http://www.cnblogs.com/sirzxj/archive/2012/04/28/2475249.html)

 

posted on 2012-06-04 09:49  dudumao  阅读(...)  评论(... 编辑 收藏
阿里云