본문 바로가기

Webstoryboy

Category

Explanation

JAVASCRIPT

[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 아이콘6 익스플로러7 아이콘7 익스플로러8 아이콘8 익스플로러9 아이콘9 익스플로러10 아이콘10 익스플로러11 아이콘11 엣지 아이콘 안드로이드 아이콘 ios 아이콘
screen 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능
innerWidth 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능
innerHeight 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능

참고(Reference)

  • MDN JavaScript

더보기

인스타그램 보기 바로가기

포트폴리오 스터디 바로가기

유튜브 영상보기 바로가기