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

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

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

//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) {} 로 처리 해야하는 경우도 있으니 참고.