[JS] 자바스크립트 팝업(Popup) 처리

자바스크립트 팝업(Popup) 사용법 및 상태 확인 🖼️

자바스크립트를 이용해 새로운 브라우저 창(팝업)을 열고, 이 팝업이 사용자의 브라우저 설정에 의해 차단되었는지, 또는 사용자가 직접 닫았는지 확인하는 방법을 알아봅니다.

---

팝업 생성 방법: `window.open()`

가장 기본적인 팝업 생성 방법은 window.open() 함수를 사용하는 것입니다. 이 함수는 새로운 URL을 지정된 창에서 엽니다.

기본 문법

const popupWindow = window.open(url, name, options);

• url: 팝업 창에 표시할 페이지의 주소입니다. 비워두면('') 빈 창이 열립니다.
• name: 팝업 창의 이름입니다. 같은 이름으로 다시 window.open()을 호출하면 기존 팝업의 내용이 새로고침됩니다.
• options: 팝업 창의 크기, 위치, 스크롤바 유무 등을 지정하는 문자열입니다. (예: 'width=500, height=600, top=100, left=100')

전체 예제 코드

function openPopup() {
  const url = 'https://www.google.com';
  const name = 'myPopup';
  const options = 'width=500, height=600, top=100, left=100, resizable=yes, scrollbars=yes';
  window.open(url, name, options);
}

---

팝업 유무 및 차단 확인

window.open() 함수는 성공적으로 팝업을 열면 해당 팝업 창의 참조(Window 객체)를 반환하고, 팝업이 차단되면 null을 반환합니다. 이 특징을 이용해 팝업의 상태를 확인할 수 있습니다.

1. 팝업 차단 여부 확인

함수 호출 직후 반환 값을 확인하여 팝업이 브라우저의 팝업 차단기에 의해 막혔는지 알 수 있습니다.

let popup; // 팝업 참조를 저장할 변수

function openAndCheckPopup() {
  popup = window.open('https://www.google.com', 'myPopup', 'width=500,height=600');
  // window.open()의 반환 값으로 차단 여부 확인
  if (popup === null || typeof(popup) === 'undefined') {
      alert('팝업이 차단되었습니다. 팝업 차단을 해제하고 다시 시도해 주세요.');
  } else {
      // 팝업이 성공적으로 열렸을 때
      popup.focus(); // 팝업 창에 포커스를 줌
  }
}

2. 이미 열린 팝업이 닫혔는지 확인

window.open()으로 얻은 팝업 참조 객체의 closed 속성을 확인하면 사용자가 팝업을 닫았는지 알 수 있습니다. 이 속성은 팝업이 닫혔을 때 true를 반환합니다.

설명: 아래 코드는 "상태 확인" 버튼을 누를 때, 이전에 열었던 팝업 창이 여전히 열려있는지, 아니면 사용자가 닫았는지, 혹은 애초에 차단되었는지를 종합적으로 판단하는 예제입니다.

let mySpecialPopup; // 팝업 참조를 저장할 변수
function openMyPopup() {
  mySpecialPopup = window.open('', 'specialPopup', 'width=400,height=300');
  if (mySpecialPopup) {
    mySpecialPopup.document.write('테스트 팝업이 창이 열려있는지 확인합니다.');
    mySpecialPopup.focus();
  } else {
 	 alert('팝업이 차단되었습니다.');
  }
}

function checkPopupStatus() {
  // 1. 팝업이 차단되었거나 한 번도 열린 적 없는 경우
  if (!mySpecialPopup) {
    alert('팝업이 열린 적이 없거나 차단되었습니다.');
    return;
  }
  // 2. 팝업이 닫힌 경우 (참조는 있지만 closed 속성이 true)
  if (mySpecialPopup.closed) {
      alert('팝업 창이 닫혀 있습니다.');
  } 
  // 3. 팝업이 열려 있는 경우
  else {
      alert('팝업 창이 현재 열려 있습니다!');
      mySpecialPopup.focus(); // 확인 후 팝업에 다시 포커스
  }
}

---

주의사항 및 모범 사례

• 사용자 경험(UX): 대부분의 사용자는 팝업을 선호하지 않습니다. 꼭 필요한 경우에만, 그리고 사용자의 특정 행동(예: 버튼 클릭)에 대한 결과로 팝업을 사용하세요. 페이지가 로드되자마자 팝업을 띄우는 것은 피하는 것이 좋습니다.
• 팝업 차단기: 최신 브라우저는 대부분 강력한 팝업 차단 기능을 내장하고 있습니다. 사용자가 직접 클릭하는 등의 상호작용 없이 코드로 팝업을 열려고 하면 대부분 차단됩니다.
• 현대적인 대안: 최근 웹 개발에서는 전체 페이지를 덮는 모달(Modal) 대화상자를 CSS와 JavaScript로 구현하여 팝업을 대체하는 경우가 많습니다. 이는 팝업 차단기의 영향을 받지 않고 디자인 자유도가 높다는 장점이 있습니다.