광고
웹 페이지에서 팝업 창을 활용하는 기능을 구현했는데, 사용자의 브라우저 설정에 따라 팝업이 차단되어 제대로 열리지 않는 경우가 있습니다.
이러한 문제를 방지하기 위해 자바스크립트로 팝업 차단 여부를 확인하고, 사용자에게 안내 메시지를 표시하는 방법을 알아보겠습니다.
핵심 코드 분석
function openNewWindow(url) {
const popup = window.open(url, '_blank');
if (!popup || popup.closed) {
alert('팝업이 차단되었습니다. 팝업 차단을 해제하고 다시 시도해주세요.');
} else {
// 팝업이 성공적으로 열렸을 때 추가적인 작업 (선택 사항)
popup.focus(); // 팝업 창에 포커스 주기
}
}코드 설명
- 새창 열기
- window.open(url, ‘_blank’)를 사용하여 주어진 url로 새 창을 엽니다. _blank는 새 창을 여는 표준적인 방법입니다.
- 팝업 차단 감지
- 팝업 창이 성공적으로 열렸는지 확인합니다. 팝업 차단 설정으로 인해 새 창이 열리지 않거나, 사용자가 팝업 창을 즉시 닫은 경우 등을 감지합니다.
- 팝업 차단 알림
- 팝업 창이 제대로 열리지 않으면 사용자에게 “팝업이 차단되었습니다. 팝업 차단을 해제하고 다시 시도해주세요.”라는 알림 메시지를 표시합니다.
코드 분석
popup 변수는 window.open() 함수의 반환값을 저장합니다.
이 값은 새로 열린 창(window 객체)을 나타내거나, 팝업 차단 등으로 인해 창이 열리지 못한 경우 null 값을 가집니다.
!popup 조건은 popup이 null인지 확인하여 팝업 차단 여부를 검사합니다.
popup.closed는 팝업 창이 닫혔는지 확인합니다.
typeof popup.closed == ‘undefined’는 일부 브라우저에서 팝업이 차단되었을 때 popup.closed 속성이 정의되지 않는 경우를 처리합니다.
주의 사항
- 팝업 차단 우회
- 팝업 차단은 사용자의 의도적인 설정이므로, 이를 우회하려는 시도는 사용자 경험을 해칠 수 있습니다. 팝업 차단 알림을 통해 사용자가 직접 팝업 차단을 해제하도록 유도하는 것이 좋습니다.
- 브라우저 호환성
- 팝업 차단 감지 로직은 대부분의 최신 브라우저에서 잘 작동하지만, 일부 오래된 브라우저에서는 완벽하게 작동하지 않을 수 있습니다.
이상 팝업 차단 여부를 확인하는 방법에 대한 포스팅을 마치도록 하겠습니다.
감사합니다.