웹브라우져별 전체 Height 값 구하기.

DOM, Script

웹브라우져별 전체 Height 값 구하기.

eqzero 2009. 8. 13. 01:26

주로 배경 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값이 된다.
사족이지만 달랑 브라우져의 HEIGHT값을 가져오는데 저정도 라인수가 필요하다니..어서 빨리 표준이 정착되길.ㅡㅜ..