어느 싸이트에 들어가면 들어가자 마자 조그마한 창이 하나 뜨는 걸 경험한적이 있을 것이다. 또는 링크된 내용을 클릭하면 일정한 크기를 가진 새로운 창이 뜨는 것을 한 두번 경험 하였을 것이다. 이런 새로운 창 띄우기는 간단한 자바스크립트를 이용하여 실현 할 수 있으며 새롭게 띄운 창의 여러가지 속성을 지정하여 깔끔한 창을 마음 먹은 대로 띄우는 방법을 알아보자


새창 띄우기의 기본
링크된 부분에 스크립트를 사용하여 원하는 모양의 창을 띄우는 방법이다. 다음과 같이 문서를 만들어보자

<a href='#' ONCLICK="window.open('script09.html','window','location=yes,
directories=yes,resizable=no,status=yes,toolbar=yes,menubar=yes,
width=300,height=300,scrollbars=yes');return false">새창 열기</a>


위의 스크립트는 <a href="">새창열기</a>라는 기본 링크태그에 연결할 문서부분에 #을 지정하고 ONCLICK 이벤트를 삽입한 방법이다. 마우스 클릭시 window.open이라는 함수가 실행되며 함수에 전달하는 인수는 연결문서와 locaion,directoryies,resizable,status,toolbar,menubar등이다. 파란색의 window는 창 이름이며 새로운 창을 계속 띄우고자 한다면 같은 창 이름을 사용하여 무절제한 창띄우기를 막을 수 있다.

location은 다음과 같이 주소창을 의미하며 yes는 나타낼것을 말하는 것이고 새로운창에 표시하고 싶지 않으며 no를 쓰면 된다.



directoryies는 창에서 다음그림과 같은 부분이며 yes값과 no값을 가질 수 있다.



toolbar는 다음과 같다.



menubar는 다음과 같다.



staus는 다음과 같다.



Demo 1 - 모든 옵션 no , 300 *300 창

Demo 2 - 모든 옵션 no , 500 *500 창

Demo 3 - 모든 옵션 no , location yes ,300 *300 창

Demo 4 - 모든 옵션 no , status=yes, 300 *300 창

Demo 5 - 모든 옵션 no , directories=yes,300 *300 창

Demo 6 - 모든 옵션 no , toolbar=yesm, 300 *300 창



전체창으로 띄우기
다음으로 Full Screen으로 새창이 뜨는 스크립트입니다. 아래의 링크를 눌러 보시기 바랍니다.

[ 전체화면 띄워보기 ]


풀 스크린으로 새창을 여는 스크립트는 아래와 같습니다.

<a href='#' onClick="window.open('script09.html', 'window','fullscreen,scrollbars')">전체화면</a>



페이지 들어오거나 나갈 때 새창 띄우기
특정 페이지에 들어오거나 나갈 때 작은 새창을 띄우는 방법은 아래와 같습니다. 옵션에 대해서는 위의 새창 열기의 기본적인 방법을 참고하시기 바랍니다.

<SCRIPT LANGUAGE="JavaScript">
function notice() {
window.open('notice.htm','','toolbar=no,menubar=no,location=no,height=500,width=500'); }
</SCRIPT>


라는 스크립트를 <HEAD>와 </HEAD> 사이에 넣어준 후, BODY 태그에 아래와 같이 씁니다.

※ 페이지에 들어올 때 새창 띄우기

<BODY onLoad="notice()">

※ 페이지에서 나갈 때 새창 띄우기

<BODY onUnload="notice()">