반응형
자바스크립트 를 활용하여 윈도우 창을 닫는 예제를 만들어 보겠습니다.
먼저 지난시간, 팝업창을 여는 open() 함수 예제를 재사용 하겠습니다.
코드는 하기와 같습니다.
1. 윈도우 창 열기
<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
<h1>새 윈도우 팝업창 열기예제</h1>
<script>
window.open("testPopup.html","popup" , "width=300, height=400, left=300 , top=300");
</script>
</body>
</html>2. 해당 윈도우 창에서 닫기 예제
<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
<h3>새로운 팝업창 입니다</h3>
<button onclick="javascript:window.close()">닫기</button>
</body>
</html>2번 항목에서 중요한 것은 바로 close() 함수 입니다.
자바스크립트 함수로도 윈도우 창을 닫는 역할을 수행 합니다.
<button onclick="javascript:window.close()">닫기</button>
예시를 위해서 닫기 버튼을 만들고, 태그 안에 이벤트 설정을 해줍니다.
버튼이 눌렀을때 이벤트 이기에 onclick 를 기재하고 뒤에는 자바스크립트 함수임을 알려주기 위해서
"javascript: 자바스크립트 함수" 이런식 으로 코딩 합니다.
위 처럼 닫기 창을 선택하면, 팝업창이 사라지고 1번 예제의 기본 창 만 남습니다.
자바스크립트에서 닫기 창을 구현한 예제를 구현 해 보았습니다.
window.close() 함수 입니다.
감사합니다.
반응형
'앱 만들기 > JavaScript study' 카테고리의 다른 글
| 자바스크립트 HTML 문서 제어하기 (2) | 2023.07.04 |
|---|---|
| var 과 let 예약어 차이점 (5) | 2023.01.13 |
| 자바스크립트 함수만들기 (2) | 2023.01.11 |
| 새로운 윈도우 창 열기 함수 (2) | 2023.01.10 |
| 자바스크립트 콘솔창 단축키 (6) | 2023.01.02 |
댓글