WindowOpen

새로운 창(윈도우)을 생성한다.

WindowObjectReference = window.open(strUrl, strWindowName [, strWindowFeatures]);

자주 사용되는 Window Features (string)

width: 창의 폭. (윈도우 프레임 포함)
height: 창의 높이. (윈도우 프레임 포함)
left: 화면의 좌측으로 부터의 위치. 단위 없는 픽셀 값을 사용한다.
top: 화면의 상단으로 부터의 위치. 단위 없는 픽셀 값을 사용한다.
resizable: 사용자의 창의 크기 조절 여부를 정한다. (yes|no)
scrollbars: 창안의 스크롤바 표시 여부를 정한다. (yes|no)

접근성을 고려한 방법

창이 하나 더 생기는 것은 사용하던 웹페이지 외로 컨트롤 해야 하는 새로운 것이 만들어 지기 때문에 사용자 입장에서의 편의성과 접근성을 고려해 주어야 한다. 기본적으로는 창의 크기 조절 여부, 스크롤바 등은 사용자가 컨트롤 할 수 있게 해 주는 것이 좋다. 또한 창은 보통 <a>와 같이 사용하게 되는데 아래와 같은 사항을 고려해 주어야 한다.

<a href="#" onClick="window.open('popup.html', 'mypopup', 'width=100, height=100');">

이 방법은 클릭시 페이지 내에 href안의 #에 해당하는 anchor가 없기 때문에 팝업은 정상적으로 작동 하지만 페이지가 화면 맨 상단으로 이동하게 된다. 이를 방지하기 위해서 아래와 비슷한 방법으로 href안에서 클릭 작동을 하지 않에 처리를 하는 경우가 많다.

<a href="javascript:void(window.open('popup.html', 'mypopup', 'width=100, height=100'));">

하지만 이 방법은 href안에 javascript: 로 시작하는 잘못된 hypertext가 들어가기 사용자 입장에서는 href의 값을 이용할 수 없게 된다.

<a href="popup.html" onclick="window.open(this.href, 'mypopup', 'width=100, height=100'); return false;">새창열기</a>

이와 같이 사용하게 되면 href안에 적절한 값이 들어가기 때문에 사용자가 새창으로 링크를 열거나 북마크를 할 수도 있게 된다. 그리고 javascript를 꺼놓은 상태이거나 팝업이 작동하지 않는 브라우져에서도 해당 페이지로 이동할 수 있게 된다.

hyeonseok.com

Archive / Javascript / WindowOpen

자주 사용되는 Window Features (string)

접근성을 고려한 방법

관련 링크