JSP - JavaScript window.open, close (2020-09-16)

2022. 9. 18. 22:253층 1구역 - 개발의 장/JSP

1. 서론

 

이번엔 window.open과 close에 알아보도록 하자.

 

2. 본론

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex25</title>
	<script type="text/javascript">
	function myClick() {
		window.open("https://www.melon.com/song/detail.htm?songId=2093044", "width=1000, height=800, top=100, left=300")
		
		//window.open("https://www.melon.com/song/detail.htm?songId=2093044", "_self", "width=1000, height=800, top=100, left=300") 현재 페이지
		//window.open("https://www.melon.com/song/detail.htm?songId=2093044", "_black", "width=1000, height=800, top=100, left=300") 새로운 창
		//window.open("https://www.melon.com/song/detail.htm?songId=2093044", "", "width=1000, height=800, top=100, left=300") 새로운 창
		//window.open("https://www.melon.com/song/detail.htm?songId=2093044", "width=1000, height=800, top=100, left=300") 새 탭
	}		
	
	</script>
</head>
<body>
	<!-- <input type = "button" value = "새창" onclick= "myClick()"> -->
	<label onclick="myClick()">달이 차오른다 가자</label>
</body>
</html>

 

위 코드는 label태그에 있는 텍스트를 클릭했을 때 window.open 괄호에 넣어둔 링크로 갈 수 있다.

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex26-1</title>
	<script type="text/javascript">
	function myClick() {
		window.open("ex26-2.jsp", "", "width=1000, height=800")
	}		
	
	</script>
</head>
<body onload="myClick()">
	<!-- <input type = "button" value = "새창" onclick= "myClick()"> -->
	
</body>
</html>

위 코드는 body태그에 onload라는 이벤트를 주어 다음 웹사이트를 열었을 때, 팝업창이 나오도록 한 것이다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex26-2</title>
	<script type="text/javascript">
	function window.close() {
		window.close()
	}		
	
	</script>
</head>
<body>
	<h1>공 지 사 항</h1>
	<p>
	재활용 쓰레기 봉투를 무료로 나눠드리고 있사오니, 마을회관에서 받아가시길 바랍니다.
	누구는 줬네 안 줬네 하지 마시고 지금 바로 마을회관으로 오셔서 받아가시면
	감사하겠습니다. :-)
	</p>
	<input type="checkbox" onclick="window.close()"> 하루 동안 닫기
</body>
</html>

위 코드는 26-1.jsp 웹을 열었을 때, 자동으로 나오는 팝업창이다.

checkbox에 window.close를 주어 checkbox에 체크했을 때 사라지도록 했다.

 

단, 현재 시간 지정이라던가 그런 것은 주어지지 않았기 때문에 '하루 동안 닫기' 같은 기믹은 작동하지 않는다.