여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. Javascript - BOM - window 객체
Javascript – BOM – window 객체
6개월전 작성
5개월전 수정

BOM = Browser Object Model = 브라우져의 기능/요소를 객체화 하여 제어할 수 있도록 하는것.

✔️ 표준이 정의되지 않아서 대부분의 브라우져에서 지원되지만 차이가 있을 수 있다.

 

대부분은 window 창을 띄우거나 닫을 때 많이 사용한다.

 

대표적인 객체로는 window 객체가 있고 window 객체의 하위 객체로 screen, location, history, navigator, popup boxes, document가 있다.

이 포스트에는 window 객체에 대해 먼저 알아보자.

window

windows 창 객체. 모든 전역 JavaScript 객체, 함수 및 변수는 자동으로 window 객체의 하위 객체가 된다.

HTML DOM도 window 객체의 하위 객체다.

가장 하단에서 예시를 볼 수 있다.

window.innerWidth

브라우저 창의 내부 너비를 픽셀 단위로 반환한다.

Javascript
window.innerWidth;

이런식으로 입력한다.

window.innerHeight

브라우저 창의 내부 높이를 픽셀 단위로 반환한다.

Javascript
window.innerHeight;

이런식으로 입력한다.

window.open()

브라우져에서 새 창을 연다.

Javascript
window.open(주소,타겟,창 정보);

이런식으로 입력한다.

주소 (선택 사항)
새 창에서 열고자하는 URL을 입력한다. 기본값 = about:blank.
타겟 (선택 사항)
새 창을 어디서 열지 타겟을 지정한다. 기본값 = _blank.
창 정보 (선택 사항)
width / innerWidth
:
스크롤 막대까지 포함하여 창의 너비를 지정한다. 최소값 100px부터 입력할 수 있다.
height / innerHeight
:
스크롤 막대까지 포함하여 창의 높이를 지정한다. 최소값 100px부터 입력할 수 있다.
left / screenX
:
새 창이 열릴 때 왼쪽으로부터의 거리를 지정한다. 픽셀 단위로 지정한다.
top 또는 screenY
:
새 창이 열릴 때 위쪽으로부터의 거리를 지정한다. 픽셀 단위로 지정한다.

window.close()

브라우져에서 현재 창을 닫는다.

Javascript
window.close();

이런식으로 입력한다.

window.moveTo()

현재 창을 이동시킨다.
비슷한 메서드로 window.moveBy()가 있다.

Javascript
window.moveTo(x축, y축);
window.moveBy(x축, y축);

이런식으로 입력한다.

메서드 설명
moveTo
:
절대 좌표처럼 화면 전체에서 px 단위로 창을 이동시킨다.
moveBy
:
상대 좌표처럼 현재 창의 위치에서 px 단위로 창을 이동시킨다.

window.resizeTo()

현재 창 크기를 조정한다.

Javascript
window.resizeTo(가로, 세로)

이런식으로 입력한다.

예제

HTML
<button onclick="newWindow();">새로운 창 열기</button>
<button onclick="browserInfo();">브라우져 크기</button>
<p>
<button onclick="mvUp();">위로 이동</button>
<button onclick="mvDown();">아래로 이동</button>
<button onclick="mvLeft();">왼쪽으로 이동</button>
<button onclick="mvRight();">오른쪽으로 이동</button>
<button onclick="mvTo();">기본 위치로 이동</button>
</p>
<p>
<button onclick="sizeQuater();">4분의 1 크기</button>
<button onclick="size500300();">500*300 크기</button>
<button onclick="sizeDefault();">기존 크기</button>
</p>
<p id="BrowserInfo"></p>
Javascript
function newWindow(){
newWindow = window.open("", "", "width=350, height=200, top=100, left=100");
newWindow.document.write("

새로운 창

"); } function mvUp(){ newWindow.moveBy(0, -10); newWindow.focus(); newWindow.document.getElementById("info").innerHTML = "moveBy()로 기존 위치에서 y축 기준 위로 10px 이동"; } function mvDown(){ newWindow.moveBy(0, 10); newWindow.focus(); newWindow.document.getElementById("info").innerHTML = "moveBy()로 기존 위치에서 y축 기준 아래로 10px 이동"; } function mvLeft(){ newWindow.moveBy(-10, 0); newWindow.focus(); newWindow.document.getElementById("info").innerHTML = "moveBy()로 기존 위치에서 x축기준 왼쪽으로 10px 이동"; } function mvRight(){ newWindow.moveBy(10, 0); newWindow.focus(); newWindow.document.getElementById("info").innerHTML = "moveBy()로 기존 위치에서 x축기준 오른쪽으로 10px 이동"; } function mvTo(){ newWindow.moveTo(100, 100); newWindow.focus(); newWindow.document.getElementById("info").innerHTML = "moveTo()로 화면 전체에서 top=100px, left=100px 위치에 윈도우 창 놓기"; } function sizeQuater(){ newWindow.resizeTo(window.screen.availWidth / 2, window.screen.availHeight / 2); newWindow.focus(); } function size500300(){ newWindow.resizeTo(500, 300); newWindow.focus(); } function sizeDefault(){ newWindow.resizeTo(350, 200); newWindow.focus(); } function browserInfo(){ document.getElementById("BrowserInfo").innerHTML = "현재 실행 중인 창의 크기는 가로: " + window.innerWidth + "px, 세로: " + window.innerHeight + "px 입니다."; }
기본 예시
참고
관련 포스트
Javascript - BOM - window 객체 - 현재글
Mingg`s Diary
밍구
공부 목적 블로그