[Javascript] window 객체

window 객체

브라우저 객체는 브라우저에 내장된 객체를 말하며, window 객체는 브라우저 객체의 최상위 객체입니다. window 객체에는 document, screen, location, history, navigator 객체를 포함하고 있으며, 이를 브라우저 객체 모델(BOM: Browser Object Model)이라고 합니다.

window 객체

window 객체 속성(Properties)

종류	설명
closed	브라우저 창이 열려 있는지 닫혀 있는지에 대한 정보의 값을 불린값으로 반환합니다.
console	디버깅을 목적으로 브라우저에서 객체의 정보를 반환합니다.
document	브라우저에 대한 문서 정보를 표현합니다.
event	브라우저에 이벤트 정보를 표현합니다.
frames	브라우저에 구조를 프레임을 형태로 표현합니다.
fullScreen	브라우저에 인터페이스를 풀 화면으로 표현합니다.
history	브라우저의 방문 페이지에 대한 정보를 설정합니다.
innerHeight	브라우저의 콘텐츠 영역의 높이(스크롤 포함)값을 반환합니다.
innerWidth	브라우저의 콘텐츠 영역의 너비(스크롤 포함)값을 반환합니다.
length	브라우저에 사용된 프레임의 개수를 반환합니다.
localStorage	브라우저에 세션에 저장된 정보를 반환합니다.
location	브라우저 현재 위치에 대한 정보를 반환합니다.
name	브라우저의 이름에 대한 정보를 반환합니다.
navigator	브라우저 navigator 객체에 대한 정보를 반환합니다.
opener	열려 있는 창에 대한 정보를 반환합니다.
outerHeight	브라우저의 툴바/스크롤바를 포함한 바깥 영역의 높이를 반환홥니다.
outerWidth	브라우저의 툴바/스크롤바를 포함한 바깥 영역의 너비를 반환홥니다.
pageXOffset	브라우저의 문서 위치(스크롤된 위치)의 x좌표를 반환합니다.
pageYOffset	브라우저의 문서 위치(스크롤된 위치)의 y좌표를 반환합니다.
parent	브라우저 현재 창의 부모창에 대한 정보를 반환합니다.
screen	브라우저 screen 객체에 대한 정보를 반환합니다.
screenLeft	브라우저 화면에서의 x좌표에 대한 정보를 반환합니다.
screenTop	브라우저 화면에서의 y좌표에 대한 정보를 반환합니다.
screenX	브라우저 화면에서의 x좌표에 대한 정보를 반환합니다.
screenY	브라우저 화면에서의 y좌표에 대한 정보를 반환합니다.
self	브라우저의 현재 사용 중인 창에 대한 정보를 반환합니다.
status	브라우저의 상태 표시줄의 글자 정보를 반환합니다.
top	브라우저 제일 위에 표시된 브라우저 창에 대한 정보를 반환합니다.

window 객체 메서드

종류	설명
alert()	확인 버튼을 누를 수 있는 경고 대화 상자를 표시합니다.
atob()	base-64 유형의 문자열을 디코딩합니다.
blur()	현재 윈도우의 포커스를 없애줍니다.
btoa()	base-64 유형의 문자열을 인코딩합니다.
clearInterval()	일정 시간마다 함수를 반복(setInterval())하는 것을 중지합니다.
clearTimeout()	일정 시간 후 함수를 한 번 실행(setTimeout())하는 것을 중지합니다.
close()	현재 윈도우를 닫습니다.
confirm()	확인과 취소 버튼을 누를 수 있는 대화 상자를 표시합니다.
createPopup()	팝업 창을 만듭니다.
focus()	현재 윈도우로 포커스를 설정합니다.
moveBy()	윈도우 창의 위치를 현재 위치를 기준으로 이동합니다.
moveTo()	윈도우 창의 위치를 특정 위치로 이동시킬 때 사용합니다.
open()	새창을 열어줍니다.
print()	현재 창의 콘텐츠 부분을 프린트합니다.
prompt()	사용자 입력이 가능한 입력창을 띄어줍니다.
resizeBy()	윈도우 창의 크기를 현재 크기를 기준으로 조절합니다.
resizeTo()	윈도우 창의 크기를 특정 크기로 조절합니다.
scroll()	scrollTo로 이름이 변경되었습니다.
scrollBy()	윈도우 스크롤의 위치를 스크롤 위치를 기준으로 이동합니다.
scrollTo()	윈도우 스크롤의 위치를 특정 위치로 이동합니다.
setInterval()	일정 시간마다 함수를 반복해서 실행합니다.
setTimeout()	일정 시간 후 함수를 한 번만 실행합니다.
stop()	원도우 창이 로드되는 것을 멈춥니다.

Sample1

현재 브라우저의 위치를 알아내는 예제입니다.

결과

현재 브라우저의 x축 좌표 값[screenX] : 0
현재 브라우저의 y축 좌표 값[screenY] : 23

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>screenX, screenY</title>
</head>
<body>
    
    <script>
        var nowScreenx = window.screenX;
        var nowScreeny = window.screenY;
        
        document.write("현재 브라우저의 x축 좌표 값[screenX] : " + nowScreenx, "px<br>");
        document.write("현재 브라우저의 y축 좌표 값[screenY] : " + nowScreeny, "px<br>");
    </script>
</body>
</html>

Sample2

현재 컨텐츠 요소의 크기를 구하는 예제입니다.

결과

현재 컨텐츠 요소의 가로 값[innerWidth] : 1680px
현재 컨텐츠 요소의 세로 값[innerHeight] : 916px

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>screenX, screenY</title>
</head>
<body>
    
    <script>
        var nowInnerWidth = window.innerWidth;
        var nowInnerHeight = window.innerHeight;
        
        document.write("현재 컨텐츠 요소의 가로 값[innerWidth] : " + nowInnerWidth, "px
");
        document.write("현재 컨텐츠 요소의 세로 값[innerHeight] : " + nowInnerHeight, "px
");
    </script>
</body>
</html>

호환성(Compatibility)

						6	7	8	9	10	11
screen	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능
innerWidth	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능
innerHeight	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능