듀얼모니터 고려한 window.open 띄우기
브라우저에서 새 창을 띄울 때 자바스크립트 window.open 함수를 쓰는데, left, top, width, height 를 지정할 수 있다. 이 때 듀얼모니터 사용자의 경우 개발자 의도와 다르게 나올 수 있어 위치를 조정해줘야 한다.
네이버 검색이랑 구글링을 열심히 해봤는데 막상 소스 떠다가 적용해보면 결과가 형편없어서 그냥 새로 만들었다.
현재 띄워져 있는 창을 부모창이라고 해보자. 부모창이 어떤 모니터에 떠있나를 따지기는 비효율적이고, 그냥 자식창을 부모창 가운데에 띄워주면 된다.
자식창Left값 : 부모창Left값 + 부모창Width반값 – 자식창Width반값;
자식창Top값 : 부모창Top값 + 부모창Height반값 – 자식창Height반값;
문제는 윈도우 운영체제에서 듀얼 모니터를 어떻게 설정하냐에 따라 window.open 이 위치를 잘못 잡는다.
해상도 설정에 가면 1번 모니터, 2번 모니터가 있다. 편의상 좌측 모니터를 1번, 우측 모니터를 2번이라고 하자.
좌측 모니터를 주모니터로 하면, 좌측 모니터의 width값의 시작은 0px부터, 우측 모니터의 width값의 시작은 1000~2000px 대에서 시작할 것이다.
그런데 우측 모니터를 주모니터로 하면, 우측 모니터의 width값의 시작이 0px이기 때문에, 좌측 모니터 width값이 마이너스대가 된다.
그런데 window.open은 left나 top값이 마이너스일 경우, 그냥 모니터 가운데에 창을 띄워버린다.
즉, 좌측 모니터가 주모니터일 때는 좌우측 모두 width 값이 양수이므로 부모창의 가운데 위치를 잘 찾지만,
우측 모니터가 주모니터일 때는 우측의 경우 정상적으로 부모창의 가운데에 띄우고, 좌측의 경우 그냥 모니터 가운데 띄우게 된다.
한 마디로 대칭성이 깨지는 것이다.
대칭성을 확보하기 위해서는 window를 일단 띄우고 move 시키는 방법, 모니터가 좌측인지 중앙인지 우측인지 판별해서 부모창 가운데 위치를 찾지 말고 그냥 모니터 가운데로 띄워주는 방법, 이렇게 두 가지를 생각해보았는데, 비효율적이므로 구현하지는 않는다.
<예제>
var nWidth = “500”;
var nHeight = “300”;
// 듀얼 모니터 고려한 윈도우 띄우기
var curX = window.screenLeft;
var curY = window.screenTop;
var curWidth = document.body.clientWidth;
var curHeight = document.body.clientHeight;
var nLeft = curX + (curWidth / 2) – (nWidth / 2);
var nTop = curY + (curHeight / 2) – (nHeight / 2);
var strOption = “”;
strOption += “left=” + nLeft + “px,”;
strOption += “top=” + nTop + “px,”;
strOption += “width=” + nWidth + “px,”;
strOption += “height=” + nHeight + “px,”;
strOption += “toolbar=no,menubar=no,location=no,”;
strOption += “resizable=yes,status=yes”;
var winObj = window.open(this.m_strDlgUrl, _strName, strOption);
if (winObj == null) {
alert(“팝업 차단을 해제해주세요.”);
return false;
}
<설명>