[备忘]Javascript页面窗口高度相关

得到当前页面可视高度和宽度的函数

javascript

function getHeight(){  
    var yScroll;  
    if (window.innerHeight && window.scrollMaxY) {  
          yScroll = window.innerHeight + window.scrollMaxY;  
      } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac  
          yScroll = document.body.scrollHeight;  
      } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari  
         yScroll = document.body.offsetHeight;  
    }     
   var windowHeight;  
   if (self.innerHeight) { // all except Explorer  
          windowHeight = self.innerHeight;  
      } else if (document.documentElement && document.documentElement.clientHeight) {  
    // Explorer 6 Strict Mode  
         windowHeight = document.documentElement.clientHeight;  
     } else if (document.body) { // other Explorers  
        windowHeight = document.body.clientHeight;  
     }  
   // for small pages with total height less then height of the viewport  
  if(yScroll < windowHeight){  
      pageHeight = windowHeight;  
      } else {  
          pageHeight = yScroll;  
      }  
      return pageHeight;  
}  
             
function getWidth(){  
        var xScroll  
       if (window.innerHeight && window.scrollMaxY) {  
          xScroll = document.body.scrollWidth;  
         } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac  
         xScroll = document.body.scrollWidth;  
          } else {  
         xScroll = document.body.offsetWidth;  
         }  
       var windowWidth  
      if (self.innerHeight) { // all except Explorer  
         windowWidth = self.innerWidth;  
      } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode  
      windowWidth = document.documentElement.clientWidth;  
   } else if (document.body) { // other Explorers  
       windowWidth = document.body.clientWidth;  
      }  
        if(xScroll < windowWidth){  
         pageWidth = windowWidth;  
          } else {  
         pageWidth = xScroll;  
       }  
return pageWidth;  
}

javascript 各种得到浏览器宽度和高度的函数

function getInfo() {
var s = "";
s += " 网页可见区域宽："+ document.body.clientWidth+"\n"; 
s += " 网页可见区域高："+ document.body.clientHeight+"\n";
s += " 网页可见区域宽："+ document.body.offsetWidth + " (包括边线和滚动条的宽)"+"\n";
s += " 网页可见区域高："+ document.body.offsetHeight + " (包括边线的宽)"+"\n"; 
s += " 网页正文全文宽："+ document.body.scrollWidth+"\n"; 
s += " 网页正文全文高："+ document.body.scrollHeight+"\n"; 
s += " 网页被卷去的高(ff)："+ document.body.scrollTop+"\n"; 
s += " 网页被卷去的高(ie)："+ document.documentElement.scrollTop+"\n";
s += " 网页被卷去的左："+ document.body.scrollLeft+"\n"; 
s += " 网页正文部分上："+ window.screenTop+"\n"; 
s += " 网页正文部分左："+ window.screenLeft+"\n"; 
s += " 屏幕分辨率的高："+ window.screen.height+"\n";
s += " 屏幕分辨率的宽："+ window.screen.width+"\n"; 
s += " 屏幕可用工作区高度："+ window.screen.availHeight+"\n";
s += " 屏幕可用工作区宽度："+ window.screen.availWidth+"\n"; 
s += " 你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色"+"\n";
s += " 你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸"+"\n"; 
s += " window的页面可视部分实际高度(ff) "+window.innerHeight+"\n"; 
alert (s); } 

====================================================================================
用javascript在不同的浏览器中取窗口的可视高度和页面的内容高度是个烦心的事，所用的html标准不同、页面的内容高度是否超过窗口的可视高度都会对取值产生影响，所用到的取值方法也不同。

一、取窗口的可视高度（即浏览器的上面的工具栏到下面的状态栏之间的高度）
1、IE中的取法

1 document.getElementsByTagName("html")[0].offsetHeight;

2、Firefox、Chrome、Opera中取法

1 window.innerHeight;

二、取页面内容的高度（所有浏览器中的取法）
1 Math.max(document.getElementsByTagName("body")[0].scrollHeight, 窗口的可视高度)

三、完整的代码如下：
1234 //窗口的可视高度 var windowHeight=document.all ? document.getElementsByTagName("html")[0].offsetHeight : window.innerHeight; //页面的内容高度 var pageHeight=Math.max(windowHeight, document.getElementsByTagName("body")[0].scrollHeight);