JavaScript Window - 브라우저 객체 모델

브라우저 객체 모델(BBrowser Object Model (BOM)은 JavaScript가 브라우저와 소통할 수 있도록 허용합니다.

브라우저 객체 모델(Browser Object Model (BOM))

브라우저 객체 모델(BOM)의 공식 표준은 존재하지 않습니다.

최신 브라우저는 JavaScript 상호작용의 방법과 속성을 거의 모두 구현했으므로, 이는 자주 BOM의 방법과 속성으로 언급됩니다.

Window 객체

모든 브라우저가 지원합니다 window 객체. 이는 브라우저 창을 대표합니다.

모든 globale JavaScript 객체, 함수, 변수는 자동으로 window 객체의 구성원이 됩니다.

globale 변수는 window 객체의 속성입니다.

globale function은 window 객체의 메서드입니다.

또는(HTML DOM의)document 객체는 window 객체의 속성입니다：

window.document.getElementById("header");

等同于：

document.getElementById("header");

창 크기

이 두 가지 속성은 브라우저 창의 크기를 결정하는 데 사용될 수 있습니다.

이 두 가지 속성은 모두 픽셀로 크기를 반환합니다：

  • window.innerHeight - 브라우저 창의 내 높이(픽셀로 계산)
  • window.innerWidth - 브라우저 창의 내 폭(픽셀로 계산)

브라우저 창(브라우저 뷰포트)은 툴바와 스크롤바를 포함하지 않습니다.

Internet Explorer 8, 7, 6, 5에 대해서는：

  • document.documentElement.clientHeight
  • document.documentElement.clientWidth

또는

  • document.body.clientHeight
  • document.body.clientWidth

모든 브라우저에서 사용할 수 있는 실용적인 JavaScript 솔루션(모든 브라우저 포함):

예제

var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

직접 테스트해 보세요

이 예제는 브라우저 창의 높이와 너비를 표시합니다：(툴바와 스크롤바를 포함하지 않음)

다른 창 메서드

다른 몇 가지 메서드:

  • window.open() - 새 창 열기
  • window.close() - 현재 창 닫기
  • window.moveTo() - 현재 창 이동
  • window.resizeTo() - 현재 창 재조정