[front] beforeunload 작동 안함 / visibilitychange 이벤트

목표 : 웹브라우저에서 새로운 창을 띄우고, 새 창이 종료되면 원래 창에서 상품 현황을 다시 불러온다.

** 원래창 <-> 새창 간의 통신은 postMessage 사용.

 

---

 

1. 이슈 발생 : 태블릿에서 beforeunload 안의 소스가 전혀 실행되지 않아요

 

원래 소스)

let popWinObj = window.open("http://localhost:8080/myItemList.html");

popWinObj.onload = function() { //onload로 웹페이지가 로딩이 완료되면 
    popWinObj.onbeforeunload = function() { 
        //beforeunload로 브라우저 종료할 때만 함수 실행되도록 함.
        ... func ...
    }
}

기존에는 새 창이 종료되기 직전 onbeforeunload event 로 제어하고 있었는데,

pc나 모바일에서는 가능했으나 태블릿에서 새창을 종료해도 원래 창에 아무 반응이 없었다.

 

이리저리 찾아보니 MDN에서 beforeunload 이벤트는 모바일에서 특히 불안정하다는 설명내용 발견

https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event

Window: beforeunload event - Web APIs | MDN

 

 

 

 

 

2. 대안 - visibilitychange event 

document 객체의 visibilitychange event 가 있었다.

현재 문서의 컨텐츠가 보여지거나(탭 활성화) 숨겨질 때(탭 비활성화)를 감지하여 작동한다.
또한 document.visibilityState 속성을 사용하면 현재 문서의 활성화 여부도 알 수 있으며,
document.visibilityState 속성값은 "visible" 또는 "hidden" 이다.

그래서 탭 활성화 여부에 따라 함수가 호출되도록 변경했습니다. 새창 종료하면 원래창이 활성화되니까요~

https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilitychange_event

Document: visibilitychange event - Web APIs | MDN

 

사용 예시)

document.onvisibilitychange = function() {
	... func ... //<- 이 부분에 onbeforeunload 에서 사용하던 함수 넣으면 작동한다.
}

 

 

적용하니 pc는 물론이고 태블릿, 모바일에서도 새창 종료했을 때 원래창 함수가 잘 작동했다.


끝!

 

 

---

< 참조글 >

https://mong-blog.tistory.com/entry/Page-Visibility-API-%EC%9C%A0%EC%A0%80%EA%B0%80-%ED%8E%98%EC%9D%B4%EC%A7%80%EB%A5%BC-%EB%B3%B4%EA%B3%A0-%EC%9E%88%EB%8A%94%EC%A7%80-%EC%95%8C%EB%A0%A4%EC%A4%98#google_vignette

Page Visibility API, 유저가 페이지를 보고 있는지 알려줘!