window객체 open() close() 창 열고 닫기

| javascript/window()객체

2014. 2. 8. 02:19

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="ex_js_syntax">
<script type="text/javascript" language="javascript">
<!--
function window_open(){
/* 윈도우 새창 열기(http://www.daum.net) => window.open("url주소");
window.open(URL,name,specs,replace)
※ name
_blank, _parent, _self, _top, name(원도우 이름) || 기본적으로 _blank(새창)
※ specs
width=pixels => 넓이
height=pixels => 높이
top=pixels => 창 맨 위에서 위치
left=pixels => 창 왼쪽에서 위치
menubar=yes|no|1|0 => 메뉴 표시 줄 여부
status=yes|no|1|0 => 상태 표시 줄 추가 여부
titlebar=yes|no|1|0 => 제목 표시 줄 여부
나머지 기능은 브라우저 별로 지원이 다름
scrollbars=yes|no|1|0 => 스크롤바 막대 표시 여부[MSIE & Firefox & Opera만 지원]
toolbar=yes|no|1|0 => 브라우저 도구모음 표시 여부[MSIE & Firefox 만 지원]
channelmode=yes|no|1|0 => 극장모드로 창 열기[MSIE만 지원]
fullscreen=yes|no|1|0 => 전체화면모드로 창 열기 [MSIE만 지원]
resizable=yes|no|1|0 => 창 크기 조정 여부[MSIE만 지원]
location=yes|no|1|0 => 주소 필드 표시 여부[Opera만 지원]
※ replace
true - URL 히스토리 목록에 현재 문서 저장 안함
false - URL 히스토리 목록에 현재 문서 저장
*/
open_url = "http://www.daum.net";
open_specs = "width=500, height=400, top=50, left=50, location=yes, menubar=yes, status=yes, titlebar=yes";
open_specs_browsers = navigator.userAgent;
/* 브라우저 판별식 */
out_side_browser = 0;
/* 브라우저 맞게 specs 추가 */
if(open_specs_browsers.search("MSIE")!= -1){
/* Internet Explorer 브라우저 참조로 극장모드 no하면 fullscreen모드임*/
open_specs += ", scrollbars=yes, toolbar=yes, channelmode=yes, fullscreen=yes, resizable=yes";
}
else if(open_specs_browsers.search("Firefox")!= -1){
/* Firefox 브라우저 */
open_specs += ", scrollbars=yes, toolbar=yes";
}
else if(open_specs_browsers.search("Opera")!= -1){
/* Opera 브라우저 */
open_specs += ", scrollbars=yes, location=yes";
}
else if(open_specs_browsers.search("Chrome")!= -1){
/* Chrome 브라우저 */
/* MSIE의 fullscreen기능을 다른 브라우저에 비슷하게 지원은 아래처럼 하면 될듯... */
open_specs_fullscreen = "height=" + screen.availHeight + ", width=" + screen.availWidth
open_specs = open_specs_fullscreen + ", location=yes, menubar=yes, status=yes, titlebar=yes";
}
else if(open_specs_browsers.search("Safari")!= -1){
/* Safari 브라우저 */
}
else{
/* 5대 부라우저(MSIE Firefox Opera Chrome Safari) 외 판별식으로 기본속성만 사용전환 */
out_side_browser = 1;
}
if(out_side_browser != 1) open_window = window.open(open_url,"_blank", open_specs, false);
else open_window = window.open(open_url);
document.getElementById("window_open").innerHTML = open_url+" 창열기";
}
function window_open_close(){
/* 윈도우 창 열기(http://www.daum.net) => window.open(); */
open_close_url = "http://www.daum.net";
open_close_specs = "width=350, height=200, top=300, left=300";
open_close_window = window.open(open_close_url, "open_close_window", open_close_specs, false);
document.getElementById("window_open_close").innerHTML = open_close_url+" 창열기";
}
function window_close(){
/* 윈도우 창 닫기(http://www.daum.net) => window.close(); */
open_close_window.close();
document.getElementById("window_close").innerHTML = open_close_url+" 창닫기";
}
//-->
</script>
<form name="input_type" id="input_type" method="post" >
윈도우 => 창 열기(http://www.daum.net) <br />
<p id="window_open" onclick="window_open();">window객체-메서드 open()[클릭]</p>
<hr />
윈도우 => 창 닫기(http://www.daum.net) <br />
<p id="window_open_close" onclick="window_open_close();">window객체-메서드 close()사용할 open()[클릭]</p>
<p id="window_close" onclick="window_close();">window객체-메서드 close()[클릭]</p>
</form>
</div>
</body>
</html>

--------------------------------------------------------------------------------------------

위 소스 예제 보기

window.open()

window.close()

윈도우 창 열기(http://www.daum.net) => window.open();

윈도우 창 닫기(http://www.daum.net) => window.close();

window.open(URL,name,specs,replace) 속성 설명

※ name

_blank, _parent, _self, _top, name(원도우 이름) || 기본적으로 _blank(새창)

※ specs

문법	설명
width=pixels	창 넓이
height=pixels	창 높이
top=pixels	창 맨 위에서 위치(y좌표)
left=pixels	창 왼쪽에서 위치(x좌표)
menubar=yes\|no\|1\|0	창 메뉴 표시 줄 여부
status=yes\|no\|1\|0	창 상태 표시 줄 추가 여부
titlebar=yes\|no\|1\|0	창 제목 표시 줄 여부
아래 리스트 부터는 브라우저 별로 지원이 다름
scrollbars=yes\|no\|1\|0	창 스크롤바 막대 표시 여부[MSIE & Firefox & Opera만 지원]
toolbar=yes\|no\|1\|0	창 브라우저 도구모음 표시 여부[MSIE & Firefox 만 지원]
channelmode=yes\|no\|1\|0	창 극장모드로 창 열기[MSIE만 지원]
fullscreen=yes\|no\|1\|0	창 전체화면모드로 창 열기 [MSIE만 지원]
resizable=yes\|no\|1\|0	창 크기 조정 여부[MSIE만 지원]
location=yes\|no\|1\|0	창 주소 필드 표시 여부[Opera만 지원]

※ replace

true - URL 히스토리 목록에 현재 문서 저장 안함

false - URL 히스토리 목록에 현재 문서 저장

window 속성 보기(접어두었습니다.)

출처 & 인용 - http://www.w3schools.com/

저작자표시 비영리 변경금지

'javascript > window()객체' 카테고리의 다른 글

window객체 resizeBy() resizeTo() 창크기[상대적, 절대적] (0)	2014.02.08
window객체 moveBy() moveTo() 창 이동[상대적, 절대적] (0)	2014.02.08
window객체 print() 프린트 (0)	2014.02.08
window객체 prompt() 질문창 (0)	2014.02.07
window객체 confirm() 확인창 (0)	2014.02.07