[jquery] 팝업 창(윈도우) 크기 변경 (window.innerHeight window.outerHeight)

자바스크립트에서 팝업 창을 띄울 수 있다.

그런데 그냥 띄우기만 해서는 의미가 없을 수도 있다.

팝업창의 사이즈가 일정하면 훨씬 깔끔하게 출력이 가능하며, 원하는위치에 배치 할 수록 더 깔끔하기 때문이다.

이를 jQuery를 이용하여 구현할 수 있다.

 

자바스크립트의 width, height 변경은 웹표준 문제 때문에 웹 개발자들이 꺼려하는 부분 중 하나다.

자바스크립트에서 지원되는 크기 관련 속성은 clientHeight, innerHeight, outerHeight, screenHeight 등 여러가지가 존재 하는데, 가장 문제가 되는 부분은 브라우저별로 각 속성의 값이 다르게 해석 된다는 점이다.

게다가 같은 브라우저에서도 버전에 따라 서로 다른 속성과 계산법이 사용되기 때문에 작업을 완료 하더라도 브라우저의 버전업이 진행되면 css가 틀어지는 현상이 발생할 수 있다.

 

그래서 오늘은 1. 웹 표준을 준수하고 2. 브라우저의 버전이 변경되어도 신뢰할 수 있는

팝업 창 resize 방식을 정리해보겠다.

 

로그인 버튼을 클릭하면 로그인 팝업창이 출력 되는 구조다. 예시로 네이버 로그인 창을 이용해보겠다.

이중에서 우리가 눈여겨 봐야 하는 부분은 팝업 창의 크기다.
팝업창의 크기가 html 컨텐츠의 내용에 맞춰 픽스되어 있다는 것을 눈으로 보고 체감하는 것이 중요하다.

그런데 이 간단해 보이는 내용이 직접 시도 해보면 생각처럼 쉽지 않다.

팝업 윈도우가 open되면 브라우저별로, 또 버전별로 팝업창의 크기가 조금씩 달라져 있기 때문이다.

 
"우리나라에서는 ie 점유율이 높으니까 ie에 맞춰서 제작한다!" 같은 마인드로 접근하면 간단할 것도 같지만,

 실제로 진행을 하다보면 ie 내에서도 6, 7, 8, 9 버전별로 팝업의 크기가 모두 다르게 출력된다.

 
그럼 팝업창의 크기를 내부 컨텐츠에 맞춰서 resize 하는 작업을 진행해보자.

1. 영역 구분하기

네이버의 로그인 팝업창을 영역별로 나누면 1. 브라우저 메뉴/타이틀이 출력되는 영역 / 2. html컨텐츠가 출력되는 영역 으로의 큰 분리할 수 있다.

지금부터는 푸른색 "브라우저 메뉴 영역"을 1영역 / 황토색 "html 컨텐츠 영역"을 2영역 이라고 하자.

브라우저별로 팝업의 크기가 달라지게 하는 범인은 1 영역(브라우저 메뉴 영역)이다. 브라우저마다 1 영역의 크기가 다르기 때문에 window.open에 입력하는 height 매개변수를 신뢰할 수 없게 되는 것이다.

 

그래서 팝업창의 크기를 조절하기 위해서는 팝업을 먼저 출력한 후에 1 영역(브라우저 메뉴 부분)과 2 영역(html 컨텐츠)의 크기를 계산해서 리사이즈 하는 방식의 접근이 필요하다.

방법으로는 ie / 파이어폭스 / 크롬  / 오페라 등에서 모두 지원되는 window.outerWidth / window.outerHeight window.innerWidth / window.innerHeight 속성을 사용하는 것이다.

 

 (window 객체의 outerWidth / outerHeight와 관련된 내용은 다음 url을 참고)
http://www.w3schools.com/jsref/prop_win_outerheight.asp

이 window.outer 속성과 window.inner 속성을 응용하면 1영역 의 width / height 계산이 가능하다.

window.outerHeight - window.innerHeight = 1영역의 높이

window.outerWidth - window.innerWidth = 1영역의 너비

 

그리고 1영역의 크기가 확인되면 2영역을 더한 픽셀 값으로 팝업창의 크기를 resize하면 끝이다.

$(window).load(function() {
  /* 1영역, 2영역 크기 확인 
  $('#container') : 2영역 컨텐츠를 감싸고 있는 div 
  (window.outerWidth - window.innerWidth) : 1영역 width 
  (window.outerHeight - window.innerHeight) : 1영역 height 
  */
  var strWidth = $('#container').outerWidth() + (window.outerWidth - window.innerWidth);
  var strHeight = $('#container').outerHeight() + (window.outerHeight - window.innerHeight);
 
  //resize 
  window.resizeTo( strWidth, strHeight );
));