• Q&A
  • 회원가입
  • 로그인

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

337  

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

더 보기

 



찾아주셔서 감사합니다. Since 2012