Diary..

cspark.egloos.com

포토로그



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

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

덧글

댓글 입력 영역