[ JavaScript ] 브라우저 높이와 넓이 구하기 ( self, innerHeight, innerWidth, documentElement, clientWidth, body, inner Width, clientHeight )

function fnGetClientWidth() {
    var intClientWidth;
    if (self.innerWidth) {
        // IE 외 모든 브라우저
        intClientWidth = self.innerWidth;
    } else if (document.documentElement && document.documentElement.clientWidth) {
        // IE 6 Strict
        intClientWidth = document.documentElement.clientWidth;
    } else if (document.body) {
        // IE
        intClientWidth = document.body.clientWidth;
    }
    return intClientWidth;
}
 
function fnGetClientHeight() {
    var intClientHeight;
    if (self.innerHeight)
        intClientHeight = self.innerHeight;
    else if (document.documentElement && document.documentElement.clientHeight)
        intClientHeight = document.documentElement.clientHeight;
    else if (document.body)
        intClientHeight = document.body.clientHeight;
    return intClientHeight;
}
 
============================================================================================
 
주로 배경 height값을 구하기 위해 브라우져의 전체 height값이 필요할 경우가 생긴다.
브라우져 종류가 많아지면서 각 웹브라우져 엔진별로 height 값을 가져오는 방식이 조금씩 다른데 샘플은 아래와 같다.

DTD는 HTML4.01 strict.dtd기준이다.

 
< !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 

< script type="text/javascript">
var userAgent = navigator.userAgent.toLowerCase();
 
var browser = {
    msie    : /msie/.test( userAgent ) && !/opera/.test( userAgent ),
    safari  : /webkit/.test( userAgent ),
    firefox : /mozilla/.test( userAgent ) && !/(compatible|webkit)/.test( userAgent ),
    opera   : /opera/.test( userAgent )
};   
 
window.onload = function (){  
  var totalHeight = 0;


 
  if( browser.msie ){ //IE
     var scrollHeight = document.documentElement.scrollHeight;
     var browserHeight = document.documentElement.clientHeight;
  
     totalHeight = scrollHeight < browserHeight ? browserHeight : scrollHeight;
 
  } else if ( browser.safari ){ //Chrome || Safari
     totalHeight = document.body.scrollHeight;
  
  } else if ( browser.firefox ){ // Firefox || NS
     var bodyHeight = document.body.clientHeight;
 
     totalHeight = window.innerHeight < bodyHeight ? bodyHeight : window.innerHeight;
 
   } else if ( browser.opera ){ // Opera
     var bodyHeight = document.body.clientHeight;
 
     totalHeight = window.innerHeight < bodyHeight ? bodyHeight : window.innerHeight;
 
   } else { 
     alert("지원하지 않는 브라우져!!");
   }
  
  alert(totalHeight); 
}

< /script>
크롬과 사파리 같은 경우 웹브라우져 엔진이 동일하기때문에 사용방식이 동일하다.
스크롤바가 생성됏을경우엔 스크롤바 길이가 전체 height값이 된다.