[JS] 팝업창이 닫힐 때 특정 동작 수행하기

Javascript의 window.open()을 이용하여 팝업창을 열었을 때, 해당 창이 닫힐 때 특정 행동을 수행하고 싶었다.

 

 

찾아보니 beforeunload 이벤트를 설정해주면 됐었는데 열린 팝업창의 스크립트에서 설정하는 방법이 있고, 팝업창을 여는 곳에서 직접 설정해주는 방법이 있었다.

 

열린 팝업창의 스크립트에서 설정하는 경우는 그냥

 

window.addEventListener('beforeunload', function(event) {
  // 특정 작업
});

addEventListener를 통해 beforeunload 이벤트를 정의해주면 된다.

 

하지만 내가 원한 작업은 부모 페이지의 요소를 변경하는 것이기 때문에 팝업창에 이벤트를 정의해주고 opener. ~ 하면서 작업하는 것보다 부모 페이지에서 열린 팝업창의 beforeunload 이벤트를 정의해주는 것이 더 편하였다.

이 방법은 window.open() 함수는 새로운 페이지의 window 객체를 반환하기 때문에, 이 값을 변수에 대입한 다음 그 변수에 beforeunload 이벤트를 정의해주면 된다.

 

var popup;

function openPopup() {
  document.querySelector('#target').textContent = '팝업창 열림';
  popup = window.open('./sample_pop.html', "팝업창", "width = 500, height = 500, top = 50, left = 50, location = no");

  popup.addEventListener('beforeunload', function() {
    document.querySelector('#target').textContent = '팝업창 닫힘';
  });
}

 

이렇게 popup이라는 변수를 선언해 주고, window.open()이 반환하는 값을 저장한 다음 popup.addEventListener()로 beforeunload를 정의해주면 된다. addEventListener()를 사용하지 않고

 

popup.onbeforeunload = function() {
  document.querySelector('#target').textContent = '팝업창 닫힘';
};

 

이렇게 onbeforeunload에 함수를 넣어줘도 된다.

 

팝업을 닫을 때 <p> 태그의 내용을 닫힘으로 바꿔준다.

 

이를 이용하면 위처럼 팝업창이 닫혔을 때 <p> 태그의 내용을 '팝업창 닫힘'으로 변경하는 등의 작업을 해줄 수 있다.

 

즐거운 오늘 배운 내용 포스팅 끝