웹페이지(브라우저 탭)의 숨김,표시 javascript visibilitychange event(자바스크립트 이벤트) 처리

웹페이지 닫기시 특별한 처리를 위해서는 beforeunload, unload 이벤트를 사용한다.

그런데, 웹페이지를 보다가 다른 웹사이트를 사용자가 보러 갔을때 특별한 처리를 위해선 어떻게 해야할까?

(다른 프로그램을 사용한다던가..)

예를 들어, 비디오 재생 중 사용자가 다른 웹페이지를 보고 있을때 비디오를 멈추고 싶다면?

 

아래와 같이 visibilitychange 이벤트로 구현이 가능하다.

// 이벤트 이름과 이벤트 접근 프로퍼티 명 설정
var hidden, visibilityChange;
if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support
    hidden = "hidden";
    visibilityChange = "visibilitychange";
}else if (typeof document.msHidden !== "undefined") {
    hidden = "msHidden";
    visibilityChange = "msvisibilitychange";
}else if (typeof document.webkitHidden !== "undefined") {
    hidden = "webkitHidden";
    visibilityChange = "webkitvisibilitychange";
}
// Warn if the browser doesn't support addEventListener or the Page Visibility API
if(typeof document.addEventListener === "undefined" || typeof document[hidden] === "undefined") {
    console.log("지원하지 않는 브라우져");
}else{
    //이벤트 등록
    document.addEventListener(visibilityChange, function(){
        console.log(document[hidden]);//document.hidden
        if(document[hidden]){
            //숨김상태
            console.log("페이지 최소화 또는 다른 탭을 보고 있는 상태");
        }else{
            console.log("페이지 보여지고 있는 상태");
        }
    }, false);
}

 

이를 활용해 비디오 재생을 제어한다면, 서버 트래픽 , 부하 등을 줄일 수도 있을것이고,

다른 특별한 제어에도 활용할 수 있겠다.

 

위 소스를 재사용하기 위해 객체 코드로 아래와 같이 재작성하였으니 필요한 곳에 사용하면 된다.

 

/*
 * visibilityChangeEvent( hiddenEventHandler , visibleEventHandler )
 *
 * hiddenEventHandler : 페이지 숨김시 처리할 callback 함수
 * visibleEventHandler : 페이지 복귀시 처리할 callback 함수
*/
const visibilityChangeEvent = function( hiddenEventHandler , visibleEventHandler ){
    if( typeof hiddenEventHandler != "function" || typeof visibleEventHandler != "function" ){
        throw new Error("Need hiddenEventHandler AND visibleEventHandler function\nexample : new visibilityChangeEvent( function hiddenEventHandler , function visibleEventHandler )");
    }

    this.hidden , this.visibilityChange;

    if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support
        this.hidden = "hidden";
        this.visibilityChange = "visibilitychange";
    }else if (typeof document.msHidden !== "undefined") {
        this.hidden = "msHidden";
        this.visibilityChange = "msvisibilitychange";
    }else if (typeof document.webkitHidden !== "undefined") {
        this.hidden = "webkitHidden";
        this.visibilityChange = "webkitvisibilitychange";
    }

    if(typeof document.addEventListener === "undefined" || typeof document[this.hidden] === "undefined") {
        throw new Error("This browser is not support visibilityChange event");
    }else{
        // Handle page visibility change
        document.addEventListener(this.visibilityChange, (event)=>{
            if(document[this.hidden]){
                hiddenEventHandler(event);
            }else{
                visibleEventHandler(event);
            }
        }, false);
    }
    return this;
}

//사용법 예시
visibilityChangeEvent(
	function(){
		console.log("다른 페이지를 보고 있거나, 다른 프로그램을 사용중");
		//동영상 재생을 멈추려면 여기에 추가
	} ,
	function(){
		console.log("이 페이지를 보는 중");
		//동영상을 다시 재생하려면 여기에 추가
	} );

 

주의할 점은 테스트해보니 상황에 따라 원하는 이벤트가 발생하지 않을 수 있다.

 

1. 듀얼 모니터인 경우 웹페이지가 아닌 다른 모니터의 화면을 조작하면 이벤트가 발생하지 않는다.

2. 다른 프로그램 실행시 실행한 프로그램이 웹브라우저 전체를 가리지 않으면 이벤트가 발생하지 않는다.

3. 웹페이지가 숨김 상태에서 다시 돌아온 것이 아닌 윈도우 작업표시줄에서 미리보기(썸네일)된 경우도 이벤트가 발생한다. -> 구분할 방법을 아직 못 찾았음.

 

참고

https://developer.mozilla.org/ko/docs/Web/API/Document/visibilityState

Document.visibilityState - Web API | MDN

 

#visibilitychange #visibilityState #web page focus event #web page hidden event #웹 페이지 숨김 이벤트 #웹 페이지 포커스 이벤트