작성자

freewebkorea

카테고리

비밀번호

제목

<H2>open() Method</H2>
<P class=mtext>open() Method 는 option 사용에 따라 반드시 그렇지 않을 수는 있지만 <B>새창을 열어서 문서를 띄워주는</B> window Object 의 Method 중에 하나이며 W3C 의 DOM Level 1 에 속하는 Method 입니다. 반드시 <B>onclick</B> 등의 event Handler와 함께 사용하며 얼핏 보면 HTML element 중 A element와 비슷해 보이지만 다양한 option 을 사용할 수 있기 때문에 새창의 크기, 위치등을 지정하여 다양한 효과를 낼 수 있습니다. 가장 보편적으로 많이 쓰는 Method 이기 때문에 이 걸 모르고서는 JavaScript 를 안다고 할 수 없을 정도죠...^^ 그럼 우선 open Method 의 option 에 대해 알아 보도록 하겠습니다. 아래의 사용법 중에 <B>[ ]</B> 괄호는 option 이므로 써도 되고 안 써도 된다는 표기... 따라서 3 가지 전부 사용하지 않으면 아무 것도 없는 브라우저 창 하나만 떠~억 뜨겠죠. 물론 이렇게 쓸리는 없습니다만...</P><B>open Method 사용법</B> 
<DIV class=input><I>window</I>.<B>open([ <I>'uri'</I> ], [ <I>'name'</I> ], [ <I>'feature'</I> ])</B> </DIV><BR><BR>
<TABLE class=attributeTbl cellSpacing=2 cellPadding=0 border=0>
<TBODY>
<TR>
<TD class=titleCell colSpan=2>open Method의 option</TD></TR>
<TR>
<TD class=syntaxLeftCellshort width="12%"><I>uri</I></TD>
<TD class=inlineRightCellTitle width="80%">
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD class=RightCellTitle colSpan=2>새창을 열면서 띄우게 될 문서의 <SPAN class=cursor onclick=TdOverLayer(uri); onmouseout=TdOutLayer()>uri</SPAN> 로서 사용하지 않고 ' ' (작은 따옴표 2개) 로 비워두면 브라우저를 새로 열었을 때 처럼 브라우저 주소입력란에 'about:blank' 가 표시되고 아무 문서 없이 창만 뜹니다. </TD></TR>
<TR>
<TD class=inlineLeftCellshort width="15%">사용예 1</TD>
<TD class=inlineRightCell style="WORD-BREAK: break-all" width="85%">&lt;button onclick="window.open('http://kr.yahoo.com', 'new_win', '');"&gt;야후 코리아&lt;/button&gt;</TD></TR>
<TR>
<TD class=inlineLeftCellshort>사용예 2</TD>
<TD class=inlineRightCell style="WORD-BREAK: break-all">&lt;a href="javascript:onclick=window.open('http://kr.yahoo.com', 'new_win', '');"&gt;야후 코리아&lt;/a&gt;</TD></TR></TBODY></TABLE></TD></TR>
<TR>
<TD class=syntaxLeftCellshort><I>name</I></TD>
<TD class=inlineRightCellTitle>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD class=RightCellTitle colSpan=2>새로 열릴 창의 이름. 이름을 지정했을 경우 창(브라우저)이 열리면 새로 열린 창이 이름을 가진다는 것을 아는 사람이 의외로 적습니다. 창 이름을 지정하면 사용자에게 편리를 제공할 수 있는데, 예를 들어 이름을 생략하고 open Method를 사용하여 창을 열면 그 링크를 클릭하여 창을 열 때마다 새로운 창이 여러 개 열리게 되지만, 이름을 주게 되면 처음 열린 창에 문서가 뜨게 됩니다.<BR>이 button&nbsp;<BUTTON onclick="window.open('http://kr.yahoo.com', 'new_win', '');">야후 코리아 (name 지정)</BUTTON> 은 여러 번 클릭해도 같은 창에 야후 코리아가 뜨지만 <BR><BR><SPAN style="COLOR: #941919">소스 : &lt;button onclick="window.open('http://kr.yahoo.com', '<B>new_win</B>', '');"&gt;야후 코리아 (name 지정)&lt;/button&gt;</SPAN><BR><BR>이 button&nbsp;<BUTTON onclick="window.open('http://kr.yahoo.com', '', '');">야후 코리아 (name 미 지정)</BUTTON> 은 클릭할 때 마다 새창이 뜬다는 뜻이죠. 창 이름 붙이는 방법은 <A href="http://www.cadvance.org/doc/java/tutorial/js_variable.asp#var_naming">JavaScript 변수 이름 만드는 방법</A>과 동일합니다.<BR><BR><SPAN style="COLOR: #941919">소스 : &lt;button onclick="window.open('http://kr.yahoo.com', <B>''</B>, '');"&gt;야후 코리아 (name 미 지정)&lt;/button&gt;</SPAN><BR><BR>아래는 frameset Page등에서 target을 지정하여 문서를 open 할 때의 option 입니다. </TD></TR>
<TR>
<TD class=inlineLeftCellshort width="15%">_blank</TD>
<TD class=inlineRightCell width="85%">새창 : 현재 창은 그대로 있고, 새창에 문서를 띄웁니다.</TD></TR>
<TR>
<TD class=inlineLeftCellshort>_media</TD>
<TD class=inlineRightCell>브라우저 좌측에 Media 창을 열고 문서를 띄웁니다. <B>IE 6 이상</B></TD></TR>
<TR>
<TD class=inlineLeftCellshort>_parent</TD>
<TD class=inlineRightCell>프레임(frame)으로 나누어진 문서의 한 단계 상위 프레임.</TD></TR>
<TR>
<TD class=inlineLeftCellshort>_search</TD>
<TD class=inlineRightCell>브라우저 좌측에 검색 창을 열고 문서를 띄웁니다. <B>IE 5 이상</B></TD></TR>
<TR>
<TD class=inlineLeftCellshort>_self</TD>
<TD class=inlineRightCell>현재창 : 즉, 자기 창 스스로에 문서를 띄웁니다.</TD></TR>
<TR>
<TD class=inlineLeftCellshort>_top</TD>
<TD class=inlineRightCell>프레임(frame)으로 나누어진 문서의 최 상위 프레임.</TD></TR></TBODY></TABLE></TD></TR>
<TR>
<TD class=syntaxLeftCellshort><I>feature</I></TD>
<TD class=inlineRightCellTitle width="80%">
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD class=RightCellTitle width="80%" colSpan=2>feature는 새창을 열 때 창의 위치, 크기 등을 지정하는 option 입니다. 아래 option 들 중에서 top, left, width, height 의 경우 사용 값은 <B>정수</B> 이고, 나머지는 yes(1), no(0) 을 공통적으로 사용합니다. 즉, toolbar=yes 와 toolbar=1 이나 동일합니다. <BR><BR>
<DIV class=note><IMG height=11 alt="" src="http://www.cadvance.org/doc/images/icon/ico_note.gif" width=11> 주의 사항<BR><BR>1. 아래의 option들 중 top, left, width, height를 제외한 나머지 option은 기본 값이 모두 yes 입니다. 그렇지만 이 것들 중(channelmode, fullscreen 제외)에서 한 가지라도 사용하게 되면 나머지 option들은 모두 no 값을 가지게 됩니다. 따라서 예를 들어 width와 height만 지정하고 나머지 option 값을 모두 no로 하고 싶다면 구태여 나머지 option을 적어주지 않아도 된다는 말이져...<BR><BR>2. 아래 option 중에 fullscreen 같은 경우 창을 닫을 수 있는 단추나 링크를 만들어 주어야 합니다. 왜냐하면 alt+F4 로 닫는 방법을 모르는 초보자의 경우 창을 못 닫아 당황하게 되거든요. 이 사람도 과거에 그런 경험이 있었는데, 결국은 booting을 다시 하고야 말았져... kai shakki(영문 사이트라 영어로 욕했음) 라는 욕이 절로 나더구요. 물론 다시는 안 갔습니다.</DIV></TD></TR>
<TR>
<TD class=inlineLeftCellshort width="15%">channelmode</TD>
<TD class=inlineRightCell width="85%">F11을 누렀을 때 처럼 상단에 channel band가 보이는 전체화면 사용 여부</TD></TR>
<TR>
<TD class=inlineLeftCellshort>directories</TD>
<TD class=inlineRightCell>브라우저 상단의 <B>연결</B> 메뉴 사용 여부</TD></TR>
<TR>
<TD class=inlineLeftCellshort>fullscreen</TD>
<TD class=inlineRightCell>전체 화면 모드 사용여부, <B>alt+F4 로 닫는다.</B></TD></TR>
<TR>
<TD class=inlineLeftCellshort>height</TD>
<TD class=inlineRightCell>새 창의 높이 지정</TD></TR>
<TR>
<TD class=inlineLeftCellshort>left</TD>
<TD class=inlineRightCell>화면 좌측에서 새창 왼쪽까지의 거리 지정</TD></TR>
<TR>
<TD class=inlineLeftCellshort>location</TD>
<TD class=inlineRightCell>브라우저 상단의 주소 입력란 사용 여부</TD></TR>
<TR>
<TD class=inlineLeftCellshort>menubar</TD>
<TD class=inlineRightCell>브라우저 상단의 main menu 사용 여부</TD></TR>
<TR>
<TD class=inlineLeftCellshort>resizable</TD>
<TD class=inlineRightCell>창 크기 조정 여부 </TD></TR>
<TR>
<TD class=inlineLeftCellshort>scrollbars</TD>
<TD class=inlineRightCell>scrollbars 사용 여부, 뒤에 <B>s</B> 붙이는거 주의</TD></TR>
<TR>
<TD class=inlineLeftCellshort>status</TD>
<TD class=inlineRightCell>브라우저 하단의 status bar 사용 여부</TD></TR>
<TR>
<TD class=inlineLeftCellshort>toolbar</TD>
<TD class=inlineRightCell>브라우저 상단의 새로고침, 중지 등이 있는 toolbar 사용 여부</TD></TR>
<TR>
<TD class=inlineLeftCellshort>top</TD>
<TD class=inlineRightCell>새창 상단과 화면 상단까지의 거리 지정</TD></TR>
<TR>
<TD class=inlineLeftCellshort>width</TD>
<TD class=inlineRightCell>새 창의 가로 크기 지정</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><BR><BR>
<HR class=grayHr>
<BR><B>open Method 예제</B> 
<P class=mtext>open Method를 사용하여 화면 상단에서 50px, 좌측에서 50px 위치에 가로 800px, 세로 600px 크기의 새 창을 여는 예제를 함 해 봅시다. scripting이 길어지므로 이럴 때는 function을 사용하면 편리하겠죠... Url은 function을 사용할 때 마다 달라지게 될 것이므로 page 라는 대입 변수로 처리해 줍니다.</P><B class=pos>입력</B> <PRE class=input id=open_win>&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;window.open Method&lt;/title&gt;
    &lt;script type="text/javascript"&gt;
    &lt;!--
    function openWin(page){
    window.open(page, 'new_win', 'top=50, left=50, width=800, height=600')
    }
    // --&gt;
    &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;button onclick="openWin('http://kr.yahoo.com');"&gt;야후 코리아&lt;/button&gt;    
    &lt;/body&gt;
&lt;/html&gt;
</PRE><A href="javascript:copy2Clipboard(open_win);open_window('../../../include/code_executor.asp');"><IMG alt="코드 실행 하기" src="http://www.cadvance.org/doc/images/icon/exec_button.gif" border=0></A><BR><BR><A name=window_close></A>
<HR class=grayHr>
<BR><B>close() Method</B> 
<P class=mtext>close() Method 는 현재창 또는 지정한 창을 닫습니다. </P><B>close Method 사용법</B> 
<DIV class=input>현재 창일 경우<BR><BR><I>window</I>.<B>close()</B><BR><BR>다른 창일 경우<BR><BR><I>windowname</I>.<B>close()</B><BR></DIV><BR><BR><BR>
<HR class=blackHr>

첨부파일

Tel. 042-353-2371

평일 오전 9시 ~ 오후 7시

기업은행

010-8649-6758

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