링크를 클릭하거나 웹 문서를 열떄 새 창이 자동으로 뜨게 하려면
window.open() 메서드를 사용한다. window() 메서드는 주로 홈페이지의 이벤트, 공지사항을 전하거나 쇼핑몰에서 상품정보를 크게 보여주는 역할을 하는데, 새 브라우저에서 열 웹문서는 미리 만들어두었다가 다음과 같이 경로부분에 작성한다.
window.open(경로, 창 이름, 창 옵션)
예를들어 새 브라우저에서 notice.html을 가로 500px, 세로 400px의 팝업창으로 여는 예제는 다음과 같다.
<script>
window.open("notice.html","", "width=500, height=400");
</script>
종종 어떤 사이트에서는 새로고침을 할때마다 똑같은 팝업창이 중복적으로 나타나는 경우가 있는데, 이는 팝업창의 이름을 설정하지 않아서 생기는 문제로, 다음과 같이 팝업창의 이름을 설정하면 해결할 수 있다.
window.open("notice.html","POP", "width=500, height=400");
//팝업창의 이름을 POP로 설정
open()메서드로 팝업창을 표시하면 기본적으로 화면 왼쪽 위 구석에 나타나는데, 팝업창의 위치는 open() 메서드의 left, top속성으로 지정할 수 있다. left는 화면의 왼쪽측면, top은 화면의 위쪽을 기준으로 팝업창을 얼마나 떨어뜨릴지 지정한다.
window.open("notice.html","pop", "width=500, height=400, left=100, top=200");
//화면의 왼쪽 100px, 위 200px를 떨어뜨려 팝업창을 표시
대부분의 팝업창에서는 사용자에게 광고나 정보를 강제로 전달하므로 최신 브라우저에서는 팝업창이 열리지 않는것을 기본으로 설정하는 경우가 많다. 이러한 경우 사용자는 웹 브라우저의 팝업 창이 열리지 않거나 차단된 사실을 모를 수 있으므로 중요한 내용을 팝업창으로 연 경우에는 팝업이 차단된 상태인지 체크하여 사용자에게 알려주는 것이 좋다.
다음은 openPOP() 함수에서 웹 브라우저의 차단여부를 확인하는 예제이다.
var blocked = false;
function openPopup() {
var newWin = window.open("notice.html", "pop", "width=500, height=400");
if (newWin == null) {
alert("팝업이 차단되어 있습니다. 팝업 차단을 해제해 주세요.")
}
newWin.moveBy(100,100);
}
//웹 브라우저에서 팝업을 차단하면 window.open()은 NULL을 반환하므로 이를 체크하면 된다.
팝업창을 모두 살펴본 후 창을 닫을 수 있도록 화면 아래쪽에 닫기 버튼 또는 링크를 포함하는 경우가 많다. 팝업창을 닫는 메서드는 close() 이다. 다음 예제는 팝업창을 닫기 위한 버튼에 window.close() 메서드를 연결한 것이다.
<button onclick="javascript:window.close();">닫기</button>