[BOM] JS - Window BOM - 윈도우 브라우저객체모델 (BOM: Browser Object Model)

BOM 정의 

 

BOM (Browser Object Model : 브라우저 객체 모델) 사용하면 JS가 브라우저와 "통신" 가능.

 

---

 

1.

BOM 공식표준은 존재 X

2.

최신 브라우저는 JS 상호작용에 대해 거의 동일한 Method(메서드)와 Property(속성) 구현해서,
이를 BOM 메서드와 속성이라 함. 

 

Window 객체

 

window 객체는 모든 브라우저에서 지원. (브라우저창 의미.)

 

---

 

1.

모든 전역 JS 객체, 함수, 변수는 자동으로 window 객체의 요소가 됨.

즉,

전역변수: window 객체의 속성.

전역함수: window 객체의 메소드.

 

2.

HTML DOM의 document 객체조차도 window 객체의 속성임. (아래 두 표현은 동일)

표현1: window.document.getElementById("header");

표현2: document.getElementById("header");

 

Window 크기 

 

1.

브라우저 창 크기 결정에 아래 두 속성 사용 가능. (픽셀 단위)

window.innerHeight - 브라우저 창의 내부 높이 (픽셀)

window.innerWidth - 브라우저 창의 내부 너비 (픽셀)

 

2.

브라우저 창 (브라우저 뷰포트)는 도구모음(=툴바 toolbar)와 스크롤바 (scrollbar)를 포함하지 않음.

 

3.

IE 8, 7, 6, 5 경우 아래 코드 사용.

 

document.documentElement.clientHeight

document.documentElement.clientWidth

또는

document.body.clientHeight

document.body.clientWidth

PS.

브라우저 내부 창크기 확인 JS 코드 (모든 브라우저 적용 가능. oolbar, scrollbar는 포함 안 함.)

 

<p id="demo"></p>

<script>

var w = window.innerWidth

         || document.documentElement.clientWidth

         || document.body.clientWidth;

var h = window.innerHeight

        || document.documentElement.clientHeight

        || document.body.clientHeight;

var x = document.getElementById("demo");

x.innerHTML = "브라우저 내부 창너비: " + w + ", 창높이: " + h + ".";

</script>

 

결과보기

Window 메서드 

 

window.open() - 새창 열기.

window.close() - 현재창 닫기.

window.moveTo() - 현재창 이동.

window.resizeTo() -현재창 크기 조정.

더 보기