Window Open

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

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를 꺼놓은 상태이거나 팝업이 작동하지 않는 브라우져에서도 해당 페이지로 이동할 수 있게 된다.

관련 링크