본문 바로가기

Programming/HTML/JavaScript/CSS

[JavaScript] window 객체

[window 객체]

 

window 객체는 객체의 계층 구조에서 최상위에 존재하며 가장 기본적이면서도 중요한 객체다.

창 열기, 창 닫기, 창 크기 조절 등 창을 제어하는 다양한 작업을 할 수 있다.


사용형식)

window.속성 : window.속성 = 값

window.메소드() : window.메소드(인자 값)


예)

window.status="환영합니다." //상태 표시줄에 문자 표시 

window.close()  // 창을 닫는다.

window.open()  // 새 창을 연다.


---------------- window 객체의 속성 -------------------

○ defaultStatus   - 브라우저 상태 표시줄에 표시할 문자열의 초기 값 설정

○ status   - 상태 표시줄에 표시할 문자열 지정

○ window   - 창 자신을 가리킴

○ frames   - 창에 포함된 프레임을 배열 형태로 지정

○ opener   - open() 메소드를 사용해서 새 창을 열었을 경우, 새 창을 열도록 한 문서를 가리킴

○ parent   - 주종 관계를 이루고 있는 프레임 문서에서 상위 프레임을 가리킴

○ self   - 현재 작업 중인 창, 즉 자기자신을 가리킴

○ top   - 프레임이 설정되기 전의 상태로 돌아감, 프레임을 모두 무시하고 창 하나만 남음

○ classes   - 문서 안에 정의된 모든 스타일시트의 정보를 갖음

○ tags   - 문서 안에 정의된 모든 태그의 정보를 나타냄

○ screenX    - 창의 x 좌표 반환

○ screenY   - 창의 y 좌표 반환

○ closed   - 창이 닫혀 있는지 확인한 후 true, false 반환

○ name   - 창 이름 반환

○ length   - 창 안에 프레임 수 반환


------------- 넷스케이프 네비게이터 전용 -----------○

 innerHeight   - 브라우저 내용의 높이

○ innerWidth   - 브라우저 내용의 넓이

○ outerHeight   - 브라우저 전체 높이

○ outerWidth   - 브라우저 전체 넓이

○ pageXoffset   - 현재 나타나는 페이지의 x 좌표

○ pageYofset   - 현재 나타나는 페이지의 y 좌표

 

---------------- window 객체의 메소드 -------------------

※ 윈도우 객체에서 사용할수 있는 이벤트 핸들러로는 onBlur, onDragdrop, onError, onFocus, onLoad, onUnload 가 있다.     


----------------->사용자의 응답을 요구하는 대화상자를 생성하는 메소드<---------------------

○ alert("메시지")   - 경고 창 띄움

○ prompt("메시지","구문")   - 입력 창 띄움

○ confirm("메시지")   - 확인, 취소 창 띄움


-----------------> 창 생성과 제거 메소드 <---------------------

○ open("문서명","창이름","속성")   - 새 창을 염

○ close()   - 창을 닫음


----------------->브라우저 크기, 위치 설정 <---------------------

○ moveBy(x,y)   - 브라우저를 상대좌표로 지정한 픽셀만큼 이동

○ moveTo(x,y)   - 브라우저를 절대좌표로 지정한 위치로 이동

○ resizeBy(x,y)   - 브라우저의 크기를 상대적으로 지정한 픽셀만큼 설정

○ resizeTo(x,y)   - 브라우저의 크기를 절대 값으로 지정한 픽셀만큼 설정

○ scroll(x,y)   - 창이나 프레임 안의 내용을 스크롤함

○ scrollBy(x,y)   - 스크롤을 상대좌표로 이동

○ ScrollTo(x,y)   - 스크롤을 절대좌표로 이동


-----------------> 동작 시간 간격을 조절하는 메소드 <---------------------

○ setTimerout("명령문",시간간격)   - 일정한 시간 간격으로 명령문을 반복 실행 (시간 1/1000초 단위)

○ clearTimerout()   - SetTimerout() 으로 동작되는 타이머 해제


-----------------> 기타 <---------------------

○ print()   - 현재 문서 출력----------------->넷스케이프 네이게이터 전용<---------------------

○ back()   - 한단계 이전 URL로 이동

○ forward()   - 한단계 이후의 URL로 이동

○ home()   - 브라우저에세 home으로 지정된 URL으로 이동

○ stop()   - 브라우저의 stop 버튼처럼 불러오기 중지

○ find("문자열")   - 지정된 문자열이 있는지 검사(true,false 값)

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


=== open() 메소드로 창열기 ===

open() 메소드는 새 창을 열어준다. 옵션을 다양하게 설정하여 다양한 모양의 새 창을 열 수 있다.

window.open() 메소드의 인자 값은 반드시 세 개를 포함해야 한다. 아무런 속성도 지정하지 않을경우에는

window.open("","","") 와 같이 입력한다.

형식) window.open("문서명","창이름","설정");

예) 다음 코드는 allim.html 문서를 좌표 50, 50 위치에 200*300 크기로 새 창을 연다. window.open("allim.html","popup","top=50 left=50 width=200 height=300")


---------- window.open() 메소드에 설정할 수 있는 창 옵션 --------------------

○ directories : yes/no   - 연결 등 디렉토리 메뉴 표시 여부

○ menubar : yes/no   - 메뉴 바 표시 여부

○ toolbar  : yes/no   - 툴 바 표시 여부

○ location : yes/no   - 주소 입력줄 표시 여부

○ resizable : yes/no   - 크기 재설정 버튼 표시 여부

○ status  : yes/no   - 상태 표시줄 표시 여부

○ scrollbars : yes/no   - 스크롤 바 표시 여부

○ copyhistory : yes/no   - 히스토리 정보를 저장할지 여부

○ channelmode   - 전체화면 모드

○ fullscreen   - 전체화면으로 표시

○ width  : pixel   - 창 넓이

○ height  : pixel   - 창 높이

○ left  : pixel   - 창의 좌측 좌표 값

○ top  : pixel   - 창의 위쪽 좌표 값

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


[실습하기]

----------------------open 으로 창 열기 예제-----------------------------------

<html><head> <title>Test</title>

<s-ript language="javas-ript">

function openWin(){ window.open("allim1.htm","","width=250 height=385 left=100 top=100 directories=no");}

</script></head>

<body -nload="openWin()">

</body>

</html>

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

 

----------------------close 으로 창 닫기 예제-----------------------------------

현지 활성화된 창을 닫을 때는 아래 세 가지 명령어 중 하나를 사용한다.

window.close()

self.close()

this.close()

만약 특정 창을 닫으려면 창을 열 때 해당 창에 객체명을 지정해야 한다.

1. 새 창을 열 때 창에 객체명 지정하기    윈도우 객체명 = window.open("문서명","창이름","옵션설정")    

2. 새 창으로 열린 창 닫기    윈도우 객체명.close()

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


[실습하기]

------------------- 객체명.close() 으로 창닫기 -----------------------

<html><head> <title>Test</title>

<s-ript language="javas-ript">

var win = null

function openWin(){ win = open("allim1.htm","","width=250 height=385 left=100 top=100 directories=no");}

function closeWin(){ win.close();

}

</script></head>

<body>

<img src=images/zoom.gif style="cursor:hand" onclick="openWin()">

<form name=info><input type=button name=bt value=창닫기 onclick="closeWin()"></form>

</body>

</html>

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


출처 : http://blog.naver.com/kimgudtjr/140097965840