어느 싸이트에 들어가면 들어가자 마자 조그마한 창이 하나 뜨는 걸 경험한적이 있을 것이다. 또는 링크된 내용을
클릭하면 일정한 크기를 가진 새로운 창이 뜨는 것을 한 두번 경험 하였을 것이다. 이런 새로운 창 띄우기는
간단한 자바스크립트를 이용하여 실현 할 수 있으며 새롭게 띄운 창의 여러가지 속성을 지정하여 깔끔한 창을 마음
먹은 대로 띄우는 방법을 알아보자
| 새창 띄우기의 기본 |
링크된 부분에 스크립트를 사용하여 원하는 모양의 창을
띄우는 방법이다. 다음과 같이 문서를 만들어보자
<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()"> |
|
|
|
