본문 바로가기
DOM, Script

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

by eqzero 2009. 8. 13.

주로 배경 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값을 가져오는데 저정도 라인수가 필요하다니..어서 빨리 표준이 정착되길.ㅡㅜ..