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

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

아래의 코드는 그런 용도로 팝업창내에 있어야 할 코드이며 보여줄 내용이 모니터보다 큰 경우에 대한 처리는 이 코드를 적용할 대상에 따라 다르므로 사용자의 몫으로 남겨 두었다.

//DOM로드후 창 피팅 시켜주기
window.onload = function() {
  document.body.style.overflow='hidden';
  resizer();
}
function resizer()
{
  //원하는 크기
  var contentW = 1024;
  var contentH = 768;

/*
  //이런식으로 컨텐츠의 값을 가져와서 동적으로 피팅을 목적으로 한다.
  //이렇게
  var contentW = document.getElementById('image').width;
  var contentH = document.getElementById('image').height;
  //또는 이렇게
  var contentW = document.getElementsByTagName('img').width;
  var contentH = document.getElementsByTagName('img').height;
  */

//모니터 해상도
  var maxW = screen.availWidth;
  var maxH = screen.availHeight;
  //창을 화면 중앙에 위치 시키기 위한 좌표
  var windowX = (maxW/2)-(contentW/2);
  var windowY = (maxH/2)-(contentH/2);
  //최초 최소값으로 피팅
  window.moveTo(windowX,windowY);
  window.resizeTo(contentW, contentH);
  //현재 크기가져오기
  if (window.innerWidth)
  {
    var innerW = window.innerWidth;
    var innerH = window.innerHeight;
  }
  else
  {
    var innerW = document.body.clientWidth;
    var innerH = document.body.clientHeight;
  }
  //창의 전체 크기 얻기
  var winW = contentW - (innerW - contentW);
  var winH = contentH - (innerH - contentH);

//모니터보다 큰경우 처리
  if(winW > maxW)
  {
    winW = maxW;
    windowX = 0;
  }

if(winH > maxH)
  {
    winH = maxH;
    windowY = 0;
  }
  window.moveTo(windowX,windowY);
  //최종 사이즈 조절, 크롬은 동적처리가 안된다.
  if (navigator.userAgent.indexOf('Chrome')>-1)
    //경우에 따라서 더하는 수치가 바뀔수 있으나 경험상  아래의 수치가 적당했다.
    window.resizeTo(contentW+10, contentH+58); 
  else
    window.resizeTo(winW, winH);
}
</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 다음페이지 >>

echo "Hello world!!";

Let's smile..

'피팅'에 해당되는 글 1건

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

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

티스토리툴바