윈도우 열기

<!-- 10_bom/10-01_window-open.html -->

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>10-01_window-open</title>
<!--  
	# BOM ( Browser Object Model )
	- 자바스크립트로 브라우저를 제어하기 위해서 지원되는 객체 입니다
	- window    : 브라우저 윈도우 모양 제어. 새 윈도우 열기/닫기
	  navigator : 브라우저에 대한 정보 제공
	  history   : 브라우저 윈도우에 로드된 URL 리스트의 히스토리 관리
	  location  : 브라우저 윈도우에 로드된 HTML 페이지의 URL 관리
	  screen    : 브라우저가 실행되고 있는 스크린 장치에 대한 정보 제공
	  
	# window.open()
	- 윈도우를 새로 열어서 웹페이지 출력
	  > window.open( url, windowname, feature )
	    * url        : 윈도우에 출력할 웹 페이지 주소
	      windowname : 새로 여는 윈도우 이름( 생략 가능 )
	      feature    : 윈도우 모양, 크기 등을 설정( 생략 가능 )
-->
<style type="text/css">
a {
	font-size: 24px;
	font-weight: bold;
	text-decoration: none;
}
</style>
</head>
<body>
	<h1>윈도우 열기</h1>
	<p>기본</p>
	<a href="javascript:load('<http://www.naver.com>')">naver</a>
	<br/><br/>

	<p>tab 하나</p>
	<a href="javascript:load2('<http://www.daum.net>')">DAUM</a>
	<br/><br/>

	<p>윈도우 크기 지정</p>
	<a href="javascript:load3('<http://www.seoul.go.kr>')">서울시</a>
	<br/><br/>

	<p>윈도우 열기, 닫기</p>
	<a href="javascript:load4('<http://www.naver.com>')">NAVER</a>
	<br/><br/>
	<a href="javascript:closeWindow()">윈도우 닫기</a>
	
	<!-- javascript -->
	<script type="text/javascript">
		// 기본
		function load(url){
			window.open(url);
		}
		// 윈도우 이름 지정
		function load2(url){
			window.open(url, 'daum'); // windowname 이름의 윈도우가 열려있으면 해당 윈도우에서 실행
		}
		// 윈도우 크기 지정
		function load3(url){
			window.open(url, '', 'left=300, top=200, width=500, height=400');
		}
		// 윈도우 열기, 닫기
		let newWin = null;
		function load4(url){
			newWin = window.open(url, 'naver', 'left=300, top=200, width=500, height=400');
		}
		function closeWindow(){
			if(newWin == null || newWin.closed){ // 윈도우가 열리지 않았거나, 닫혀 있는지 확인
				return;
			} else {
				newWin.close();
			}
		}
	</script>
</body>
</html>