'웹 프로그래밍/JavaScript'에 해당되는 글 9건

  1. 2012.08.09 팝업창 자동 피팅 시켜주기(크롬 동작) 2
웹 프로그래밍/JavaScript , 2012. 8. 9. 13:01

팝업창 자동 피팅 시켜주기(크롬 동작)

간혹 자바스크립트로 창을 띄울때 자동으로 팝업창의 내용에 따라 팝업창의 크기를 동적으로 바꿔주고 싶을때가 있다.

아래의 코드는 그런 용도로 팝업창내에 있어야 할 코드이며 보여줄 내용이 모니터보다 큰 경우에 대한 처리는 이 코드를 적용할 대상에 따라 다르므로 사용자의 몫으로 남겨 두었다.
view plaincopy to clipboardprint?
  1. //DOM로드후 창 피팅 시켜주기  
  2. window.onload = function() {  
  3.   document.body.style.overflow='hidden';  
  4.   resizer();  
  5. }  
  6. function resizer()  
  7. {  
  8.   //원하는 크기  
  9.   var contentW = 1024;  
  10.   var contentH = 768;  
  11.   
  12.   /* 
  13.   //이런식으로 컨텐츠의 값을 가져와서 동적으로 피팅을 목적으로 한다. 
  14.   //이렇게 
  15.   var contentW = document.getElementById('image').width; 
  16.   var contentH = document.getElementById('image').height; 
  17.   //또는 이렇게 
  18.   var contentW = document.getElementsByTagName('img').width; 
  19.   var contentH = document.getElementsByTagName('img').height; 
  20.   */  
  21.   
  22.   //모니터 해상도  
  23.   var maxW = screen.availWidth;  
  24.   var maxH = screen.availHeight;  
  25.   //창을 화면 중앙에 위치 시키기 위한 좌표  
  26.   var windowX = (maxW/2)-(contentW/2);  
  27.   var windowY = (maxH/2)-(contentH/2);  
  28.   //최초 최소값으로 피팅  
  29.   window.moveTo(windowX,windowY);  
  30.   window.resizeTo(contentW, contentH);  
  31.   //현재 크기가져오기  
  32.   if (window.innerWidth)  
  33.   {  
  34.     var innerW = window.innerWidth;  
  35.     var innerH = window.innerHeight;  
  36.   }  
  37.   else  
  38.   {  
  39.     var innerW = document.body.clientWidth;  
  40.     var innerH = document.body.clientHeight;  
  41.   }  
  42.   //창의 전체 크기 얻기  
  43.   var winW = contentW - (innerW - contentW);  
  44.   var winH = contentH - (innerH - contentH);  
  45.   
  46.   //모니터보다 큰경우 처리  
  47.   if(winW > maxW)  
  48.   {  
  49.     winW = maxW;  
  50.     windowX = 0;  
  51.   }  
  52.   
  53.   if(winH > maxH)  
  54.   {  
  55.     winH = maxH;  
  56.     windowY = 0;  
  57.   }  
  58.   window.moveTo(windowX,windowY);  
  59.   //최종 사이즈 조절, 크롬은 동적처리가 안된다.  
  60.   if (navigator.userAgent.indexOf('Chrome')>-1)  
  61.     //경우에 따라서 더하는 수치가 바뀔수 있으나 경험상  아래의 수치가 적당했다.  
  62.     window.resizeTo(contentW+10, contentH+58);   
  63.   else  
  64.     window.resizeTo(winW, winH);  
  65. }  
  66. </script>  

크롬의 브라우저 사이즈 가져오기 부분은 오래전부터 널리 알려진 고질적인 버그-크로미움과 크롬, 그리고 해당된 자바스크립트 엔진쪽에서는 버그라고 판단을 안했는지 몇년이 지났는데도 고치지 않고 있다.-


그리고 일반 팝업 사이즈 띄우기에서는 document.body.style.overflow='hidden'; 만 넣어줘도 크롬에서 정상적으로 동작하는 경우가 많기는 한데 경우에 따라 if (navigator.userAgent.indexOf('Chrome')>-1) {} 로 처리 해야하는 경우도 있으니 참고.

'웹 프로그래밍 > JavaScript' 카테고리의 다른 글

swfobject로 플래시 간단히 넣기.  (0) 2010.02.16
[jquery] 스크롤 팔로워 v0.1a - 스크롤 따라 다니는 레이어 배너 or 메뉴  (5) 2009.12.24
[jquery] 마우스 오른쪽 버튼, 복사 막기, 드래그 금지(불펌방지)  (14) 2009.10.26
[DOM] 브라우저별 childNodes의 개수가 다르다!?  (1) 2009.10.22
[jquery] 스크롤 팔로워 v0.1 - 스크롤 따라 다니는 레이어 배너 or 메뉴  (6) 2009.10.17
Posted by TheBits
<< 이전페이지 1 2 3 4 ··· 9 다음페이지 >>

티스토리툴바