window.open('팝업주소 또는 파일이름','팝업창 이름','팝업창 설정');
자바스크립트의 window객체의 open(url,name,option)함수를 활용하면 팝업창을 띄울 수 있다.
- url : 팝업을 띄울 url 또는 경로를 나타낸다. 빈 문자열을 지정하거나 매개변수를 생략하면 빈 페이지가 열린다.
- name : 새로 열리는 창의 이름이나 속성값을 지정한다.
- _blank 새 창 열기(기본값)
- _parent 부모 프레임에 열기
- _self 현재 페이지에 열기
- _top 로드 프레임셋에 열기
- 새로 열린 팝업창의 이름을 정하는데, 동일한 이름의 팝업창이 열려있다면 또 열리지 않고 열린 창을 대상으로 실행. 이름이 다르다면 새로 열린다.
- option : 팝업 옵션, 선택적인 값으로 창 크기나 스크롤바 등의 속성을 지정한다.
- width : 창 너비 값
- height : 창 높이 값
- left : 왼쪽에서의 위치
- top : 위에서의 위치
- scrollbars : 스크롤 바 여부
- resizable : 창 조절 여부
- location : 주소창 표시 여부
- toolbars : 툴바 여부
window.close(); //창 닫기
자바스크립트의 window 객체의 close()함수를 통해 창을 닫을 수 있는데, 이 때 대상인 창은 window.open()에 의해 열린 창이어야한다. 그렇지 않으면 Scripts may not close windows that were not opened by script 라는 문구의 오류가 나타난다.
예시 ( 이미지 맵 활용 )
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.open("popup.html","pop1","width=300,height=300,top=100,left=150,scrollbars=no,location=yes,toolbars=no");
//window.open(url,target,features);
//target의 기본값은 _blank
</script>
</head>
<body>
<h1>팝업창을 띄웁니다.</h1>
<h4>팝업창 차단을 해제해주세요.</h4>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>공지사항</title>
</head>
<body>
<p>
<!-- 이미지맵 활용 -->
<img src="book.jpg" alt="책 소개" usemap="#book">
<map name="book" id="book">
<area shape="rect" coords="230,348,280,390" href="#" onclick="window.close()">
</map>
</p>
</body>
</html>
예시 ) 구구단을 입력하면 단을 입력받아서 JSP로 넘겨주어 구구단을 계산하고, JSP에서는 다시 HTML로 전송하는 예제
opener.document~ : 팝업창을 띄운 메인창을 지칭할 때는 앞에 opener.를 써준다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function winopen(){
var dan = document.getElementById("dan").value;
window.open("gugu.jsp?dan="+dan, "_blank","width=300,height=300");
}
</script>
</head>
<body>
단을 입력하세요.
<input type="text" id="dan" value="3" size="10">
<input type="button" value="팝업창 열기" onclick="winopen()">
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function winclose(){
//opener : 팝업창을 오픈한 메인창(부모창)
//메인창의 dan값을 팝업창의 dan값으로 변경시킨다.
//이 창도 또 다른 팝업창을 만들 수 있는데, 만약 또 다른 팝업창이
//popup2.html로 가려면 opener.openr~로 접근해야한다.
opener.document.getElementById("dan").value = document.form1.dan.value;
window.close();
}
</script>
</head>
<body>
<%
int dan = Integer.parseInt(request.getParameter("dan"));%>
<h2><%= dan %>단</h2>
<%
for(int i=1; i<=9;i++){
out.println(dan + "x" + i + "=" + dan*i + "<br>");
}
%>
<form name="form1">
메인창에 전달할 값을 입력하세요. <input type="text" name="dan">
<input type="button" value="닫기" onclick="winclose()">
</form>
</body>
</html>
'WEB > JAVASCRIPT' 카테고리의 다른 글
| 자바스크립트 정규표현식으로 회원가입 폼 만들어보기 (0) | 2022.06.30 |
|---|---|
| 자바스크립트로 페이지 이동(location.href, location.replace()) (0) | 2022.06.30 |
| 자바스크립트로 문서에 HTML요소 추가하기 (0) | 2022.06.30 |
| 가위바위보 게임 및 간이 계산기 만들기 (0) | 2022.06.27 |
| 자바스크립트 예제 - 객체 (1) (0) | 2022.06.27 |