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() -현재창 크기 조정.
더 보기
