Window 객체를 이용한 팝업 생성하기

Kiwisae 2022. 8. 16. 12:36

다음과 같은 순서를 지켜 작성해야 한다.

			open ("실행할URL", "문서이름", "옵션")

이 때, 옵션에 가로, 세로 크기를 지정하는 내용이 반드시 들어가야 한다.

(width, height)

간단한 팝업창을 띄워본다.

<script>
	open("http://www.daum.net", "mywin01", "width=200, height=400");
</script>

캡쳐를 하기 위해 팝업창 위치를 옮겼는데,

별도로 옵션을 지정하지 않으면 좌측 상단에 열리는 것이 기본값이다.

실행 위치는 다음과 같은 형식으로 지정한다.

<script>
	window.open("http://www.daum.net", "mywin01", "width=200, height=400")
	window.open("http://www.kakao.com", "mywin02", "width=200, height=400 left=300, top=100")
</script>

팝업 함수를 응용하여

새 창이 열리는 버튼과 창을 닫아주는 버튼을 생성해보았다.

이전에 날짜와 시간을 출력하는 문서를 date01.html 이라는 이름으로 저장했는데,

그 문서를 새 창으로 열어보았다.

<head>
<script>
	function winopen(){
		window.open("date01.html", "mywin01", "width=400, height=200");
	}
	
	function winclose(){
		window.close();
		
	}
</script>
</head>
<body>
	<input type="button" value="새 창 열기" onClick="winopen()">
	<input type="button" value="창 닫기" onClick="winclose()">
</body>

이 때, winclose 함수에는 아무것도 지정하지 않았다.

내가 닫으려고 하는 것은 새로 팝업으로 열리는 date01.html 문서인데,

저 상태에서 실행한다면 부모 윈도우만 닫히고 date01.html 문서는 닫히지 않는다.

그래서 head의 function 위쪽에 변수 w1를 설정해서 코드를 수정한다.

<script>
	var w1;
	
	function winopen(){
		w1 = window.open("date01.html", "mywin01", "width=400, height=200, left=500, top=200");
	}
	
	function winclose(){
		w1.close();
		
	}
</script>

창닫기를 누르면 date01.html 팝업창만 종료된다. 부모 윈도우는 종료되지 않는다.