왕진 블로그
반응형
Web Development · JavaScript
JavaScript window.open과 close
새 윈도우를 열고 참조를 저장한 뒤, 열린 창인지 확인하고 닫는 흐름을 정리합니다.
시작 오늘 분석할 코드
이 예제는 브라우저 window 객체가 제공하는 시간 제어와 창 제어 기능을 다룹니다. 타이머는 특정 함수를 나중에 또는 반복해서 실행하고, window.open은 별도 브라우저 창을 제어합니다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>윈도우 열기</title> <script> function load(URL) { window.open(URL, "myWin", "left=300,top=300,width=400,height=300"); } </script> </head> <body> <h3>window.open()으로 윈도우 열기</h3> <hr> <a href="javascript:load('http://www.graceland.com')"> 엘비스 프레슬리 홈 페이지</a><br> <a href="javascript:load('http://www.universalorlando.com')"> 유니버설 올랜드 홈 페이지</a><br> <a href="javascript:load('http://www.disneyworld.com')"> 디즈니월드 홈 페이지</a><br> </body> </html> <!-- 다음 window/timer 예제 --> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>윈도우 닫기</title> <script> let newWin=null; // 새로 연 윈도우 기억 function load(URL) { newWin = window.open(URL, "myWin", "left=300,top=300,width=400,height=300"); } function closeNewWindow() { if(newWin==null || newWin.closed) // 윈도우가 열리지 않았거나 닫힌 경우 return; // 윈도우가 없는 경우 그냥 리턴 else newWin.close(); // 열어 놓은 윈도우 닫기 } </script> </head> <body> <h3>window의 close()로 윈도우 닫기</h3> <hr> <a href="javascript:load('http://www.disneyworld.com')"> 새 윈도우 열기(디즈니월드)</a><br> <a href="javascript:window.close()"> 현재 윈도우 닫기</a><br> <a href="javascript:closeNewWindow()"> 새 윈도우 닫기</a> </body> </html>
실제 출력 미리보기
용어 용어 정리
window브라우저 창을 나타내는 최상위 객체입니다.
setInterval일정 시간마다 함수를 반복 실행합니다.
setTimeout지정한 시간이 지난 뒤 함수를 한 번 실행합니다.
timerID타이머를 취소하기 위해 저장하는 식별자입니다.
window.open새 창을 열고 그 창을 가리키는 참조를 반환합니다.
closed창이 이미 닫혔는지 알려주는 window 참조의 프로퍼티입니다.
1 실행 시점을 제어하는 이유
모든 코드를 즉시 실행하면 사용자 동작이나 시간 흐름에 반응하기 어렵습니다. 타이머는 시간이 지난 뒤 실행하거나 일정 주기로 반복 실행해야 할 때 사용합니다.
이벤트/시간
→
함수 실행
→
DOM 변경
2 setInterval 반복 실행
setInterval()은 지정한 간격마다 함수를 반복 호출합니다. 텍스트 회전 예제는 200ms마다 문자열의 첫 글자를 뒤로 보내 span 내용을 갱신합니다.
let timerID = setInterval("doRotate()", 200); clearInterval(timerID);
반복 타이머는 반드시 멈출 조건을 함께 설계해야 합니다.
3 setTimeout 지연 실행
setTimeout()은 일정 시간이 지난 뒤 함수를 한 번만 실행합니다. 이미지 위에 5초 동안 머물면 사이트로 이동하고, 마우스가 빠지면 타이머를 취소합니다.
setInterval
계속 반복합니다. clearInterval로 중단합니다.
setTimeout
한 번 실행합니다. clearTimeout으로 취소합니다.
반응형
4 문자열 실행과 함수 전달
원본 예제는 setInterval("doRotate()", 200)처럼 문자열을 사용합니다. 학습용으로 동작은 하지만, 실무에서는 문자열 대신 함수 참조를 넘기는 방식이 더 안전합니다.
setInterval(doRotate, 200); setTimeout(function () { load("https://example.com"); }, 5000);
5 window.open 옵션
window.open(URL, name, option)은 새 창을 열고, 이름과 위치·크기 옵션을 지정할 수 있습니다. 팝업 차단 정책 때문에 사용자 클릭 없이 열면 막힐 수 있습니다.
| 인자 | 의미 | 예시 |
|---|---|---|
| URL | 열 주소 | http://www.graceland.com |
| name | 창 이름 | myWin |
| left/top | 창 위치 | left=300,top=300 |
| width/height | 창 크기 | width=400,height=300 |
6 새 창 닫기
새 창을 나중에 닫으려면 window.open()이 반환한 참조를 변수에 저장해야 합니다. 닫기 전에 null인지, 이미 closed인지 확인하면 오류를 줄일 수 있습니다.
1
새 창 열기newWin = window.open(...)
2
상태 확인newWin이 null이거나 closed인지 검사합니다.
3
닫기 실행열려 있으면 newWin.close()를 호출합니다.
7 현재 창 이동과 닫기
window.location에 URL을 대입하면 현재 창이 해당 주소로 이동합니다. window.close()는 현재 창 닫기지만, 브라우저 정책상 스크립트가 열지 않은 창은 닫히지 않을 수 있습니다.
| 코드 | 동작 | 주의 |
|---|---|---|
| window.location = url | 현재 창 이동 | 기록에 남을 수 있음 |
| window.open(...) | 새 창 열기 | 팝업 차단 가능 |
| newWin.close() | 새 창 닫기 | 참조 필요 |
| window.close() | 현재 창 닫기 | 정책상 제한 가능 |
8 자주 하는 실수
| 실수 | 증상 | 해결 |
|---|---|---|
| timerID를 저장하지 않음 | 타이머를 중단할 수 없습니다. | setInterval/setTimeout 반환값을 변수에 저장합니다. |
| clear 함수 종류를 혼동 | 타이머가 계속 동작합니다. | interval은 clearInterval, timeout은 clearTimeout을 사용합니다. |
| 문자열로 코드 실행 | 디버깅과 보안에 불리합니다. | 함수 참조나 익명 함수를 전달합니다. |
| 새 창 참조를 저장하지 않음 | 나중에 닫을 수 없습니다. | window.open 결과를 변수에 담습니다. |
| closed 확인 없이 close 호출 | 이미 닫힌 창을 조작하려 합니다. | null과 closed를 먼저 검사합니다. |
9 최종 체크리스트
| 체크 | 통과 기준 |
|---|---|
| 반복 실행 | setInterval과 clearInterval 관계를 압니다. |
| 지연 실행 | setTimeout과 clearTimeout 관계를 압니다. |
| 창 열기 | window.open의 URL, 이름, 옵션을 구분합니다. |
| 창 닫기 | 새 창 참조와 closed 검사를 이해합니다. |
| 브라우저 정책 | 팝업 차단과 close 제한 가능성을 고려합니다. |
10 팝업 차단 확인
window.open은 사용자 클릭 같은 명확한 사용자 동작 안에서 실행될 때 가장 안정적입니다. 페이지 로드 직후 자동으로 새 창을 열면 브라우저 팝업 차단에 막힐 수 있습니다.
새 창 예제는 링크 클릭으로 실행되는 구조라 학습용으로 적합합니다.
핵심 한 줄 요약
window.openwindow.open은 새 창 참조를 반환하고, 이 참조를 저장해야 나중에 close()로 닫을 수 있습니다.
timerID타이머를 멈추기 위해 반드시 저장합니다.
newWin새 창을 제어하려면 window.open 결과 참조가 필요합니다.
policy팝업과 창 닫기는 브라우저 정책의 영향을 받습니다.
Tags
#JavaScript #window #setInterval #setTimeout #clearInterval #clearTimeout #window.open #window.close #timer #티스토리
▼ 티스토리 태그 입력란 복사용
JavaScript, window, setInterval, setTimeout, clearInterval, clearTimeout, window.open, window.close, timer, 티스토리
반응형
'php' 카테고리의 다른 글
| JavaScript 스크롤·위치·크기 — scrollBy·moveBy·resizeBy 완전 정리 (1) | 2026.07.05 |
|---|---|
| JavaScript 타이머 — setInterval · setTimeout 완전 정리 (0) | 2026.07.05 |
| JavaScript 키 이벤트 — e.key·e.code·방향키 이동 완전 정리 (0) | 2026.07.05 |
| JavaScript 폼 입력 요소 — onfocus·radio·checkbox 완전 정리 (0) | 2026.07.05 |
| JavaScript 이미지 변경 — new Image 프리로딩·select 완전 정리 (0) | 2026.07.05 |
댓글