window 객체의 구성

Mia Lee·2021년 11월 26일

Java Script

목록 보기

12/25

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	/*
	window 객체의 구성
	1) 변수(window.변수명) - window.status, window.opener 등
	2) 함수(window.함수명()) - window.open(), window.close() 등
	*/
	function func1() {
		// window.open() 함수를 사용하여 새 창 열기
		// => window.open("새 창에서 표시할 페이지 URL", "창 이름", "창 옵션(크기, 위치 등)");
// 		window.open(); // 창 옵션 중 창 크기 미 지정 시 기존 창에 새로운 탭이 열림
		window.open("", "", "width=300,height=300"); // 가로, 세로 크기 지정 시 새 창 열림
	}

	function func2() {
		// 특정 웹사이트를 새 창에서 열기
		window.open("http://www.naver.com", "창이름", "width=600,height=600,scrollbars=yes");
	}

	function func3() {
		// 현재 창 닫기
		window.close();
	}

	function func4() {
		// 새 창에서 test4_1.html 파일의 내용 표시하기
		window.open("test4_1.html", "창이름", "width=400,height=400");
	}
</script>
</head>
<body>
	<input type="button" value="창 열기 1" onclick="func1()"><br>
	<input type="button" value="창 열기 2" onclick="func2()"><br>
	<input type="button" value="창 닫기" onclick="func3()"><br>
	<input type="button" value="test4_1.html 창 열기" onclick="func4()"><br>
</body>
</html>









연습

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	function windowClose() {
		// 현재 창을 연 부모 창에 알림(alert()) 표시
		// => 자신의 부모에 접근하려면 window.opener 형식으로 접근
		window.opener.alert("새 창을 닫았습니다."); // 부모창에 alert 창 표시
		
		// 현재 새 창으로 열린 창을 닫기
		window.close();
	}
</script>
</head>
<body>
	<h1>Javascript - test4_1.html</h1>
	<!-- 창닫기 버튼을 클릭하면 현재 창 닫기 -->
	<input type="button" value="창 닫기" onclick="window.close()"><br>
	<input type="button" value="창 닫기 및 알림 표시" onclick="windowClose()">
</body>
</html>

Mia Lee

이전 포스트

자바스크립트 내장 객체

다음 포스트

window 객체의 구성

Java Script

자바스크립트 내장 객체

location 객체

0개의 댓글