div panel frame 高度宽度

我会带着你远行 2022-08-26 11:12 141阅读 0赞

# Javascript获取各种浏览器可见窗口大小 #

2008-04-03 09:40:23

搞了大半天，总算弄明白了为何用document.body.clientHeight，document.body.offsetHeight都没有办法获取网页可见区域的正确值，原来罪魁祸首是W3C定义的标准！！在新定义出来的标准下 document.documentElement.clientHeight在IE和火狐里都能获取正确值，下面一篇文章详细介绍了获取各种浏览器可见窗口大小这方面的差别：

<scrīpt>  
function getInfo()  
\{  
    var s = "";  
    s += " 网页可见区域宽："+ document.body.clientWidth;  
    s += " 网页可见区域高："+ document.body.clientHeight;  
    s += " 网页可见区域宽："+ document.body.offsetWidth + " (包括边线和滚动条的宽)";  
    s += " 网页可见区域高："+ document.body.offsetHeight + " (包括边线的宽)";  
    s += " 网页正文全文宽："+ document.body.scrollWidth;  
    s += " 网页正文全文高："+ document.body.scrollHeight;  
    s += " 网页被卷去的高(ff)："+ document.body.scrollTop;  
    s += " 网页被卷去的高(ie)："+ document.documentElement.scrollTop;  
    s += " 网页被卷去的左："+ document.body.scrollLeft;  
    s += " 网页正文部分上："+ window.screenTop;  
    s += " 网页正文部分左："+ window.screenLeft;  
    s += " 屏幕分辨率的高："+ window.screen.height;  
    s += " 屏幕分辨率的宽："+ window.screen.width;  
    s += " 屏幕可用**工作**区高度："+ window.screen.availHeight;  
    s += " 屏幕可用工作区宽度："+ window.screen.availWidth;  
    s += " 你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色";  
    s += " 你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸";  
    //alert (s);  
\}  
getInfo();  
</scrīpt>  
在我本地测试当中：  
在IE、FireFox、Opera下都可以使用  
document.body.clientWidth  
document.body.clientHeight  
即可获得，很简单，很方便。  
而在公司项目当中：  
Opera仍然使用  
document.body.clientWidth  
document.body.clientHeight  
可是IE和FireFox则使用  
document.documentElement.clientWidth  
document.documentElement.clientHeight  
原来是W3C的标准在作怪啊  
<!DOCTYPE **html** PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd][http_www.w3.org_TR_xhtml1_DTD_xhtml1-transitional.dtd]">  
如果在页面中添加这行标记的话

在IE中：  
document.body.clientWidth ==> BODY对象宽度  
document.body.clientHeight ==> BODY对象高度  
document.documentElement.clientWidth ==> 可见区域宽度  
document.documentElement.clientHeight ==> 可见区域高度  
在FireFox中：  
document.body.clientWidth ==> BODY对象宽度  
document.body.clientHeight ==> BODY对象高度  
document.documentElement.clientWidth ==> 可见区域宽度  
document.documentElement.clientHeight ==> 可见区域高度  
?  
在Opera中：  
document.body.clientWidth ==> 可见区域宽度  
document.body.clientHeight ==> 可见区域高度  
document.documentElement.clientWidth ==> 页面**对象**宽度（即BODY对象宽度加上Margin宽）  
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）  
而如果没有定义W3C的标准，则  
IE为：  
document.documentElement.clientWidth ==> 0  
document.documentElement.clientHeight ==> 0  
FireFox为：  
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）  
Opera为：  
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）

原文地址：[http://www.css88.com/article.asp?id=133][http_www.css88.com_article.asp_id_133]

--------------------

**判断浏览器的类型：**  
var ua = navigator.userAgent.toLowerCase ();  
var ōs = new Object();  
os.isFirefox = ua.indexOf ("gecko") != -1;  
os.isOpera = ua.indexOf ("opera") != -1;  
os.isIE = !os.isOpera && ua.indexOf ("msie") != -1;

**获取浏览器区域的大小：**//  
// getPageScroll()  
// Returns array with x,y page scroll values.  
// Core code from - quirksmode.org  
//  
function getPageScroll()\{

var yScroll;

if (self.pageYOffset) \{  
  yScroll = self.pageYOffset;  
 \} else if (document.documentElement && document.documentElement.scrollTop)\{  // Explorer 6 Strict  
  yScroll = document.documentElement.scrollTop;  
 \} else if (document.body) \{// all other Explorers  
  yScroll = document.body.scrollTop;  
 \}

arrayPageScroll = new Array('',yScroll)  
 return arrayPageScroll;  
\}

//  
// getPageSize()  
// Returns array with page width, height and window width, height  
// Core code from - quirksmode.org  
// Edit for Firefox by pHaez  
//  
function getPageSize()\{  
   
 var xScroll, yScroll;  
   
 if (window.innerHeight && window.scrollMaxY) \{   
  xScroll = document.body.scrollWidth;  
  yScroll = window.innerHeight + window.scrollMaxY;  
 \} else if (document.body.scrollHeight > document.body.offsetHeight)\{ // all but Explorer Mac  
  xScroll = document.body.scrollWidth;  
  yScroll = document.body.scrollHeight;  
 \} else \{ // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari  
  xScroll = document.body.offsetWidth;  
  yScroll = document.body.offsetHeight;  
 \}  
   
 var windowWidth, windowHeight;  
 if (self.innerHeight) \{ // all except Explorer  
  windowWidth = self.innerWidth;  
  windowHeight = self.innerHeight;  
 \} else if (document.documentElement && document.documentElement.clientHeight) \{ // Explorer 6 Strict Mode  
  windowWidth = document.documentElement.clientWidth;  
  windowHeight = document.documentElement.clientHeight;  
 \} else if (document.body) \{ // other Explorers  
  windowWidth = document.body.clientWidth;  
  windowHeight = document.body.clientHeight;  
 \}   
   
 // for small pages with total height less then height of the viewport  
 if(yScroll < windowHeight)\{  
  pageHeight = windowHeight;  
 \} else \{  
  pageHeight = yScroll;  
 \}

// for small pages with total width less then width of the viewport  
 if(xScroll < windowWidth)\{   
  pageWidth = windowWidth;  
 \} else \{  
  pageWidth = xScroll;  
 \}

arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)  
 return arrayPageSize;  
\}

原文地址： [http://dakular.spaces.live.com/Blog/cns!8668FFEC49BC51CE!440.entry][http_dakular.spaces.live.com_Blog_cns_8668FFEC49BC51CE_440.entry]

[http_www.w3.org_TR_xhtml1_DTD_xhtml1-transitional.dtd]: http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
[http_www.css88.com_article.asp_id_133]: http://www.css88.com/article.asp?id=133
[http_dakular.spaces.live.com_Blog_cns_8668FFEC49BC51CE_440.entry]: http://dakular.spaces.live.com/Blog/cns%218668FFEC49BC51CE%21440.entry