자바스크립트 - 브라우저 내장객체(Window객체) 활용

안녕하세요

이번 시간에는 자바스크립트에서 BOM(Browser Object Model) 이라고 하여 웹브라우저 윈도우를 관리할 목적으로 제공되는 객체 모음에 대해 글을 써봅니다.

BOM에는 계층이 있는데 계층도는 아래와 같습니다.

제가 알아볼 객체는 5가지 입니다.

window: 최상위 객체

navigator: 브라우저 이름, 버전 정보를 보관하는 객체

document: 현재 문서에 대한 정보를 보관하는 객체

location: 현재 보여지는 웹페이지의 url정보를 보관하는 객체

history: 현재 브라우저가 접근했던 url정보를 보관하는 객체

이번 시간에는 window 객체의 활용법을 다룬 소스코드를 올려봅니다.

먼저 결과 화면을 보여주면 아래와 같습니다

버튼은 4개가 있습니다.

먼저 팝업창을 열면 아래와 같은 화면이 나옵니다.

물론 아래의 화면은 제가 예시로 짠 화면이고, 링크를 걸어둘 화면을 

간단하게 구현하시면 됩니다.

창이 열리면 팝업창 닫기 버튼을 눌러서 닫을수 있고,

위치도 지정된 위치로 변경할 수 있습니다.

아래의 사진은 화면이 좀 더 커진 모습입니다.

자 그럼 이제 소스를 보시죠~

<script type="text/javascript">

var win=null; // 전역변수

var openWin=function(){

var url="가야할 주소.html";

//변수선언=window.open(url, '창이름', '속성들');

win=window.open(url, "팝업창", "width=400, height=400, left=100, top=100, 

		resizable=yes, scrollbars=no, menubar=yes, toolbar=yes, location=yes");

}



var closeWin=function(){

//window 객체의 close() 함수

if(win!=null){

win.close();

win=null;

}

}

</script>



<button onclick="openWin()"> 팝업창 열기 </button>

<button onclick="openWin()"> 팝업창 열기 </button>

<button onclick="win.moveTo(300,300)">팝업창 위치 변경</button>

<button onclick="win.resizeTo(700,700);win.focus()">팝업창 크기 변경 </button>