open() Method

open() Method 는 option 사용에 따라 반드시 그렇지 않을 수는 있지만 새창을 열어서 문서를 띄워주는 window Object 의 Method 중에 하나이며 W3C 의 DOM Level 1 에 속하는 Method 입니다. 반드시 onclick 등의 event Handler와 함께 사용하며 얼핏 보면 HTML element 중 A element와 비슷해 보이지만 다양한 option 을 사용할 수 있기 때문에 새창의 크기, 위치등을 지정하여 다양한 효과를 낼 수 있습니다. 가장 보편적으로 많이 쓰는 Method 이기 때문에 이 걸 모르고서는 JavaScript 를 안다고 할 수 없을 정도죠...^^ 그럼 우선 open Method 의 option 에 대해 알아 보도록 하겠습니다. 아래의 사용법 중에 [ ] 괄호는 option 이므로 써도 되고 안 써도 된다는 표기... 따라서 3 가지 전부 사용하지 않으면 아무 것도 없는 브라우저 창 하나만 떠~억 뜨겠죠. 물론 이렇게 쓸리는 없습니다만...
open Method 사용법

window.open([ 'uri' ], [ 'name' ], [ 'feature' ])

open Method의 option

uri

새창을 열면서 띄우게 될 문서의 uri 로서 사용하지 않고 ' ' (작은 따옴표 2개) 로 비워두면 브라우저를 새로 열었을 때 처럼 브라우저 주소입력란에 'about:blank' 가 표시되고 아무 문서 없이 창만 뜹니다.
사용예 1	<button onclick="window.open('http://kr.yahoo.com', 'new_win', '');">야후 코리아</button>
사용예 2	<a href="javascript:onclick=window.open('http://kr.yahoo.com', 'new_win', '');">야후 코리아</a>

name

새로 열릴 창의 이름. 이름을 지정했을 경우 창(브라우저)이 열리면 새로 열린 창이 이름을 가진다는 것을 아는 사람이 의외로 적습니다. 창 이름을 지정하면 사용자에게 편리를 제공할 수 있는데, 예를 들어 이름을 생략하고 open Method를 사용하여 창을 열면 그 링크를 클릭하여 창을 열 때마다 새로운 창이 여러 개 열리게 되지만, 이름을 주게 되면 처음 열린 창에 문서가 뜨게 됩니다. 이 button 은 여러 번 클릭해도 같은 창에 야후 코리아가 뜨지만 소스 : <button onclick="window.open('http://kr.yahoo.com', 'new_win', '');">야후 코리아 (name 지정)</button> 이 button 은 클릭할 때 마다 새창이 뜬다는 뜻이죠. 창 이름 붙이는 방법은 JavaScript 변수 이름 만드는 방법과 동일합니다. 소스 : <button onclick="window.open('http://kr.yahoo.com', '', '');">야후 코리아 (name 미 지정)</button> 아래는 frameset Page등에서 target을 지정하여 문서를 open 할 때의 option 입니다.
_blank	새창 : 현재 창은 그대로 있고, 새창에 문서를 띄웁니다.
_media	브라우저 좌측에 Media 창을 열고 문서를 띄웁니다. IE 6 이상
_parent	프레임(frame)으로 나누어진 문서의 한 단계 상위 프레임.
_search	브라우저 좌측에 검색 창을 열고 문서를 띄웁니다. IE 5 이상
_self	현재창 : 즉, 자기 창 스스로에 문서를 띄웁니다.
_top	프레임(frame)으로 나누어진 문서의 최 상위 프레임.

feature

feature는 새창을 열 때 창의 위치, 크기 등을 지정하는 option 입니다. 아래 option 들 중에서 top, left, width, height 의 경우 사용 값은 정수 이고, 나머지는 yes(1), no(0) 을 공통적으로 사용합니다. 즉, toolbar=yes 와 toolbar=1 이나 동일합니다. 주의 사항 1. 아래의 option들 중 top, left, width, height를 제외한 나머지 option은 기본 값이 모두 yes 입니다. 그렇지만 이 것들 중(channelmode, fullscreen 제외)에서 한 가지라도 사용하게 되면 나머지 option들은 모두 no 값을 가지게 됩니다. 따라서 예를 들어 width와 height만 지정하고 나머지 option 값을 모두 no로 하고 싶다면 구태여 나머지 option을 적어주지 않아도 된다는 말이져... 2. 아래 option 중에 fullscreen 같은 경우 창을 닫을 수 있는 단추나 링크를 만들어 주어야 합니다. 왜냐하면 alt+F4 로 닫는 방법을 모르는 초보자의 경우 창을 못 닫아 당황하게 되거든요. 이 사람도 과거에 그런 경험이 있었는데, 결국은 booting을 다시 하고야 말았져... kai shakki(영문 사이트라 영어로 욕했음) 라는 욕이 절로 나더구요. 물론 다시는 안 갔습니다.
channelmode	F11을 누렀을 때 처럼 상단에 channel band가 보이는 전체화면 사용 여부
directories	브라우저 상단의 연결 메뉴 사용 여부
fullscreen	전체 화면 모드 사용여부, alt+F4 로 닫는다.
height	새 창의 높이 지정
left	화면 좌측에서 새창 왼쪽까지의 거리 지정
location	브라우저 상단의 주소 입력란 사용 여부
menubar	브라우저 상단의 main menu 사용 여부
resizable	창 크기 조정 여부
scrollbars	scrollbars 사용 여부, 뒤에 s 붙이는거 주의
status	브라우저 하단의 status bar 사용 여부
toolbar	브라우저 상단의 새로고침, 중지 등이 있는 toolbar 사용 여부
top	새창 상단과 화면 상단까지의 거리 지정
width	새 창의 가로 크기 지정

open Method 예제

open Method를 사용하여 화면 상단에서 50px, 좌측에서 50px 위치에 가로 800px, 세로 600px 크기의 새 창을 여는 예제를 함 해 봅시다. scripting이 길어지므로 이럴 때는 function을 사용하면 편리하겠죠... Url은 function을 사용할 때 마다 달라지게 될 것이므로 page 라는 대입 변수로 처리해 줍니다.
입력

<html>
    <head>
        <title>window.open Method</title>
    <script type="text/javascript">
    <!--
    function openWin(page){
    window.open(page, 'new_win', 'top=50, left=50, width=800, height=600')
    }
    // -->
    </script>
    </head>
    <body>
        <button onclick="openWin('http://kr.yahoo.com');">야후 코리아</button>    
    </body>
</html>

close() Method

close() Method 는 현재창 또는 지정한 창을 닫습니다.
close Method 사용법

현재 창일 경우

window.close()

다른 창일 경우

windowname.close()

Tel. 042-353-2371

평일 오전 9시 ~ 오후 7시

기업은행

010-8649-6758

예금주:제주사랑(송진아)

open() Method