본문 바로가기
개발/Javascript, ECMAScript

아이프레임 리사이징 크로스브라우징 예제

by 언제나초심. 2010. 10. 1.
반응형

/****************************************************************************
  브라우저 체크
  사용법 Browser.chrome >> retrun Boolean
  작성자 : Exizt
  잘 작동될지는 ㅅ-;; 그냥, 브라우저 체크해서,브라우저 별로 소스를 적용시키는 방식입니다.
  노가다 ㄱ-;
*****************************************************************************/
var Browser = {
    a : navigator.userAgent.toLowerCase()
}

Browser = {
    ie      : /*@cc_on true || @*/ false,
    ie6     : Browser.a.indexOf('msie 6') != -1,
    ie7     : Browser.a.indexOf('msie 7') != -1,
    ie8     : Browser.a.indexOf('msie 8') != -1,
    opera   : !!window.opera,
    safari  : Browser.a.indexOf('safari') != -1,
    safari3 : Browser.a.indexOf('applewebkit/5') != -1,
    mac     : Browser.a.indexOf('mac') != -1,
    chrome  : Browser.a.indexOf('chrome') != -1,
    firefox : Browser.a.indexOf('firefox') != -1
}





/****************************************************************************
  fncGetIfrResize
  아이프레임 리사이징 함수
*****************************************************************************/
function fncGetIfrReSize(FName, FWsize) {
	//alert(FName + FWsize);

   if(Browser.ie){
      try {
         var objFrame = document.all[FName]; //document.getElementById(FName); //IFrame 객체를 가져온다
         var objBody = eval(FName).document.body; 

         ifrmHeight = objBody.scrollHeight + (objBody.offsetHeight - objBody.clientHeight) ; 

         //alert("ifrmHeight["+ifrmHeight+"]  = scrollHeight["+objBody.scrollHeight+"] + offsetHeight["+objBody.offsetHeight+"] - clientHeight["+objBody.clientHeight+"]");

         if (ifrmHeight < 10) { 
               //ifrmHeight = 300;
               document.all[FName].reload();
         } else {
               objFrame.style.height = ifrmHeight + 5;
               objFrame.style.width = FWsize;   		
            }

      } catch(e) {
         //alert("Exception!!");
      };
      setTimeout("fncGetIfrReSize('"+FName+"','"+FWsize+"')",600);



//---------------------------------
// 구글 크롬 브라우저
//---------------------------------
   } else if(Browser.chrome){ //Chrome 일 때
      
      try {
         var objFrame = document.all[FName]; //document.getElementById(FName); //IFrame 객체를 가져온다
         objFrame.style.height = 500; //기본 크기로 먼저 돌려놓기.[최소 높이]

         var objBody = eval(FName).document.body; //호출된 문서.(아마도)

         ifrmHeight = objBody.scrollHeight; 
         
         //alert("ifrmHeight["+ifrmHeight+"]  = scrollHeight["+objBody.scrollHeight+"] + offsetHeight["+objBody.offsetHeight+"] - clientHeight["+objBody.clientHeight+"]");
         
         if (ifrmHeight < 10) { 
               document.all[FName].reload();
         } else {
               objFrame.style.height = ifrmHeight;
               objFrame.style.width = FWsize;   		
         }
      } catch(e) {
      };
      //setTimeout("fncGetIfrReSize('"+FName+"','"+FWsize+"')",600);


//---------------------------------
// 모질라 파이어폭스 브라우저
//---------------------------------
   } else if(Browser.firefox){ //Chrome 일 때
      
      try {
         var objFrame = document.all[FName]; //document.getElementById(FName); //IFrame 객체를 가져온다
         objFrame.style.height = 500; //기본 크기로 먼저 돌려놓기.[최소 높이]

         var objBody = eval(FName).document.body; //호출된 문서.(아마도)

         ifrmHeight = objBody.scrollHeight + 20; 
         
         //alert("ifrmHeight["+ifrmHeight+"]  = scrollHeight["+objBody.scrollHeight+"] + offsetHeight["+objBody.offsetHeight+"] - clientHeight["+objBody.clientHeight+"]");
         
         if (ifrmHeight < 10) { 
               document.all[FName].reload();
         } else {
               objFrame.style.height = ifrmHeight;
               objFrame.style.width = FWsize;   		
         }
      } catch(e) {
      };
      //setTimeout("fncGetIfrReSize('"+FName+"','"+FWsize+"')",600);

//---------------------------------
// 사파리
//---------------------------------   
   } else if(Browser.safari){
      try {
         var objFrame = document.all[FName]; //document.getElementById(FName); //IFrame 객체를 가져온다
         objFrame.style.height = 500; //기본 크기로 먼저 돌려놓기.[최소 높이]
         var objBody = eval(FName).document.body; //호출된 문서.(아마도)
         ifrmHeight = objBody.scrollHeight; 
         objFrame.style.height = ifrmHeight;
      } catch(e) {};

//---------------------------------
// 기타 브라우저
//---------------------------------
   } else { 
      
      try {
         var objFrame = document.all[FName]; //document.getElementById(FName); //IFrame 객체를 가져온다
         objFrame.style.height = 500; //기본 크기로 먼저 돌려놓기.[최소 높이]

         var objBody = eval(FName).document.body; //호출된 문서.(아마도)

         ifrmHeight = objBody.scrollHeight; 
         
         //alert("ifrmHeight["+ifrmHeight+"]  = scrollHeight["+objBody.scrollHeight+"] + offsetHeight["+objBody.offsetHeight+"] - clientHeight["+objBody.clientHeight+"]");
         
         if (ifrmHeight < 10) { 
               document.all[FName].reload();
         } else {
               objFrame.style.height = ifrmHeight;
               objFrame.style.width = FWsize;   		
         }
      } catch(e) {
      };
      //setTimeout("fncGetIfrReSize('"+FName+"','"+FWsize+"')",600);
   }


}//함수 종료



사용하는 부분



<iframe src="content.jsp" name="ifr" id="ifr" frameborder="0" width="100%" title="내용 본문 Partition" height="500" onload="fncGetIfrReSize(this.name,this.width);" scrolling="auto" ></iframe>


반응형