웹사이트에서 이벤트 페이지나 신청 페이지를 팝업으로 띄우는 경우가 있다.
이때 사용자가 로그인하지 않은 상태라면 팝업 안에서 로그인 페이지로 이동시키는 것보다, 기존 메인 페이지를 로그인 페이지로 이동시키고 팝업은 닫는 방식이 더 자연스럽다.
이번 글에서는 JavaScript의 window.opener를 사용해서 팝업창에서 부모창을 제어하는 방법을 정리한다.
1. 기존 코드의 문제점
기존 코드는 다음과 같다.
if (logYn == 'N') {
alert('로그인 후 참여 가능합니다.\n본 이벤트는 재외동포 경제인 대상 이벤트로,\n참가등록을 완료한 분에 한해 참여 가능합니다.');
location.href = "http://localhost:8080/new_okf/login/login.do";
return;
}
이 코드는 로그인 여부가 N일 때 로그인 페이지로 이동시킨다.
하지만 여기서 location.href는 현재 창을 이동시키는 코드이다.
즉, 이 코드가 팝업창 안에 있다면 메인 페이지가 아니라 팝업창 자체가 로그인 페이지로 이동한다.
사용자 입장에서는 팝업 안에서 로그인 페이지가 열리기 때문에 화면 흐름이 어색할 수 있다.
2. 원하는 동작
원하는 흐름은 다음과 같다.
팝업에서 이벤트 참여 버튼 클릭
→ 로그인 여부 확인
→ 로그인하지 않은 사용자라면 안내 메시지 출력
→ 부모창을 로그인 페이지로 이동
→ 팝업창 닫기
즉, 팝업창이 아니라 팝업을 띄운 기존 메인 페이지가 로그인 페이지로 이동해야 한다.
3. window.opener란?
window.opener는 현재 팝업창을 열어준 부모창을 의미한다.
예를 들어 메인 페이지에서 다음과 같이 팝업을 열었다고 하자.
window.open('/event/popup.do', 'eventPopup', 'width=600,height=700');
이 경우 팝업창 안에서 window.opener를 사용하면 팝업을 열어준 메인 페이지에 접근할 수 있다.
쉽게 말하면 다음과 같다.
메인 페이지 = 부모창
팝업 페이지 = 자식창
window.opener = 팝업을 열어준 부모창
4. 부모창을 로그인 페이지로 이동시키는 코드
수정 코드는 다음과 같다.
if (logYn == 'N') {
alert('로그인 후 참여 가능합니다.\n본 이벤트는 재외동포 경제인 대상 이벤트로,\n참가등록을 완료한 분에 한해 참여 가능합니다.');
// 팝업을 열어준 부모창이 존재하고, 닫혀 있지 않은 경우
if (window.opener && !window.opener.closed) {
// 부모창을 로그인 페이지로 이동시킨다.
window.opener.location.href = "/new_okf/login/login.do";
// 현재 팝업창을 닫는다.
window.close();
} else {
// 부모창이 없는 경우에는 현재 창에서 로그인 페이지로 이동한다.
location.href = "/new_okf/login/login.do";
}
return;
}
5. 코드 설명
5-1. 로그인 여부 확인
if (logYn == 'N') {
logYn 값이 N이면 로그인하지 않은 상태로 판단한다.
5-2. 안내 메시지 출력
alert('로그인 후 참여 가능합니다.\n본 이벤트는 재외동포 경제인 대상 이벤트로,\n참가등록을 완료한 분에 한해 참여 가능합니다.');
이벤트 참여 전에 로그인이 필요하다는 안내 메시지를 보여준다.
\n은 줄바꿈을 의미한다.
5-3. 부모창 존재 여부 확인
if (window.opener && !window.opener.closed) {
이 조건은 팝업을 열어준 부모창이 있는지 확인하는 코드이다.
window.opener가 존재하면 부모창이 있다는 뜻이고,
!window.opener.closed는 부모창이 아직 닫히지 않았다는 뜻이다.
부모창이 이미 닫혀 있는데 접근하려고 하면 오류가 발생할 수 있으므로 안전하게 체크하는 것이 좋다.
5-4. 부모창을 로그인 페이지로 이동
window.opener.location.href = "/new_okf/login/login.do";
이 코드가 핵심이다.
기존의 location.href는 현재 창을 이동시키지만,
window.opener.location.href는 부모창을 이동시킨다.
비교하면 다음과 같다.
// 현재 팝업창이 이동
location.href = "/new_okf/login/login.do";
// 부모창이 이동
window.opener.location.href = "/new_okf/login/login.do";
5-5. 팝업창 닫기
window.close();
부모창을 로그인 페이지로 이동시킨 후 현재 팝업창을 닫는다.
이렇게 하면 사용자는 메인 페이지에서 자연스럽게 로그인 화면을 보게 된다.
6. 절대경로보다 상대경로를 사용하는 이유
기존 코드에서는 다음과 같이 전체 주소를 사용했다.
location.href = "http://localhost:8080/new_okf/login/login.do";
개발 환경에서는 문제가 없지만, 운영 서버에서는 도메인이 달라질 수 있다.
예를 들어 개발 환경은 다음과 같을 수 있다.
http://localhost:8080
하지만 운영 환경은 다음과 같을 수 있다.
https://www.example.com
이런 경우 코드에 localhost가 남아 있으면 운영 서버에서 정상 동작하지 않는다.
따라서 같은 사이트 안에서 이동하는 경우에는 다음처럼 상대경로를 사용하는 것이 좋다.
window.opener.location.href = "/new_okf/login/login.do";
7. 최종 코드
최종 코드는 다음과 같다.
if (logYn == 'N') {
alert('로그인 후 참여 가능합니다.\n본 이벤트는 재외동포 경제인 대상 이벤트로,\n참가등록을 완료한 분에 한해 참여 가능합니다.');
// 부모창이 존재하고 닫혀 있지 않은 경우
if (window.opener && !window.opener.closed) {
// 부모창을 로그인 페이지로 이동
window.opener.location.href = "/new_okf/login/login.do";
// 팝업창 닫기
window.close();
} else {
// 부모창이 없으면 현재 창에서 로그인 페이지로 이동
location.href = "/new_okf/login/login.do";
}
return;
}
8. 정리
팝업창에서 로그인 체크를 할 때 location.href만 사용하면 팝업창 자체가 이동한다.
부모창을 이동시키고 싶다면 window.opener.location.href를 사용해야 한다.
핵심은 다음과 같다.
window.opener.location.href = "/new_okf/login/login.do";
그리고 부모창이 없는 경우를 대비해 예외 처리도 함께 작성하는 것이 안전하다.
if (window.opener && !window.opener.closed) {
window.opener.location.href = "/new_okf/login/login.do";
window.close();
} else {
location.href = "/new_okf/login/login.do";
}
이 방식을 사용하면 팝업 이벤트 페이지에서 로그인하지 않은 사용자를 자연스럽게 메인 로그인 페이지로 이동시킬 수 있다.
'HTML > JQUERY' 카테고리의 다른 글
| AJAX 통신 시 한글 깨짐 (0) | 2026.03.23 |
|---|---|
| [JavaScript] 지저분한 if-else 쳐내기: Object(Map)를 활용한 조건문 리팩토링 (0) | 2026.03.16 |
| 🛠 JSP에서 Swiper가 안 먹히는 문제 해결 (DOM 렌더링 타이밍 + 다중 Swiper 초기화 이슈) (0) | 2026.03.03 |
| 듀얼 모니터 환경에서 window.open() 팝업 위치 제어하기 (0) | 2025.11.10 |