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
현재 브라우저의 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
현재 컨텐츠 요소의 세로 값[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 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |