[JavaScript] 자바스크립트 탭 화면 이벤트 처리하기

122_자바스크립트 탭 화면 이벤트 처리하기

[적용]

• 브라우저 탭 비활성화(백그라운드화)시 시스템의 부하를 주는 작업을 멈추고 싶을 때
• 스마트폰 슬립 모드에서 브라우저 복귀 시점의 작업을 처리하고 싶을 때

---

[문법]

이벤트	발생 타이밍
visibilitychange	브라우저의 탭 상태가 변경되는 시점

---

[내용]

visibilitychange 이벤트는 브라우저 탭의 콘텐츠가 표시/비표시(백그라운드화) 변경이 일어날 때 발생한다.

document 요소에 이벤트를 설정한다.

요소 표시 상태를 나타내는 document.visibilityState를 함께 사용해 상태에 따를 처리를 분류할 수 있다.

 

HTML                                                                                                                                                              index.html

<h1>콘솔을 확인해 주세요.</h1>

JavaScript                                                                                                                                                          main.js

document.addEventListener('visibilitychange', () => {
	if (document.visibilityState === 'visible') {
    	console.log('콘텐츠 표시 상태');
        return;
    }
    
    if (document.visibilityState === 'hidden') {
    	console.log('콘텐츠 비활성화(백그라운드화) 상태');
    }
});

 

---

[예시]

화면의 비활성화(백그라운드화) 시 소리를 정지하고 복귀 시 다시 재생하는 샘플을 확인해 보자.

// 화면 표시 상태에서 소리 재생
if (document.visibilityState === 'visible') {
	playSound();
}

document.addEventListener('visibilitychange', () => {
	if (document.visibilityState === 'visible') {
    	playSound();
        return;
    }
    
    if (document.visibilityState === 'hidden') {
    	stopSound();
    }
});

/** 소리 재생 */
function playSound() {
	...생략
}

/** 재생 정지 */
function stopSound() {
	...생략
}

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김