码上快乐

相关内容   简体   繁体

通过JavaScript获取页面大小

本文转载自  查看原文  2012-06-04 09:49  6727    01.JS/jQuery/Ajax/ 浏览器/ 08.前端/性能/原型/交互

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

　　示例代码１：

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对不同域名下权限的控制，会遇到同域、跨域的情况。

　　１、同域下的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)

 


免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。



猜您在找 HTML页面中JavaScript能获取到的各种屏幕大小信息 JS 获取页面大小 用Javascript获取页面元素的位置 用Javascript获取页面元素的位置 用Javascript获取元素在页面中的绝对位置 Javascript获取页面的各种坐标汇总 javascript调用rest地址，获取页面值 js获取input长度并根据页面宽度设置大小 javascript获取iframe框架中页面document对象,获取子页面里面的内容,iframe获取父页面的元素, JavaScript-如何获取页面元素对象，元素id
 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM