728x90
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> 태그의 내용을 '팝업창 닫힘'으로 변경하는 등의 작업을 해줄 수 있다.
728x90
'Web > JS' 카테고리의 다른 글
[JS] Chrome Extension - 유데미 한글 자막 오류 수정하기 (0) | 2021.05.27 |
---|---|
[JS] Chrome Extension 제작 - 유데미 한글 자막, Udemy 한영 동시 자막 보기 (0) | 2021.05.25 |
[JS] jQuery Ajax callback 함수에서 전역 변수에 값 대입하기 (0) | 2021.02.16 |
[JS] Chrome Extension 제작 - 한국인 있나요? 유튜브 한글 댓글만 보기 (4) | 2020.12.23 |
[JS] Pseudo Element(가상 엘리먼트) style JavaScript로 변경하기 (0) | 2020.09.15 |