HTML5_html5 튜토리얼 기술에서 사용자가 페이지를 탐색하고 있는지 확인하는 방법

이제 HTML5의 페이지 가시성 인터페이스는 프로그래머에게 가시성 변경 페이지 이벤트를 사용하여 현재 페이지의 가시성 상태를 확인하고 목표한 방식으로 특정 작업을 수행할 수 있는 방법을 제공합니다. 새로운 document.hidden 속성도 사용할 수 있습니다.

문서.숨김

이 새로운 document.hidden 속성은 해당 페이지가 현재 사용자가 보고 있는 페이지인지 여부를 표시하며 값은 true입니다.

document.visibilityState

visibilityState의 값은 표시(페이지가 브라우저의 현재 활성화된 탭이고 창이 최소화되지 않았음을 나타냄)되거나 숨겨집니다(페이지가 현재 활성화된 탭 페이지가 아니거나 창이 최소화됨). .) 또는 사전 렌더링(페이지 재생성, 사용자에게 표시되지 않음).

시야 변경 이벤트

페이지 가시성 변경 사항을 듣는 것은 매우 쉽습니다.

코드 복사

코드는 다음과 같습니다.

// 다양한 브라우저와 호환 가능
var 숨김, 상태, 가시성변경
if (typeof document.hidden !== "정의되지 않음") {
숨김 = "숨김";
visibleChange = "가시성변경";
상태 = "visibilityState";
} else if (typeof document.mozHidden !== "정의되지 않음") {
숨겨진 = "mozHidden";
visibleChange = "mozvisibilitychange";
상태 = "mozVisibilityState";
} else if (typeof document.msHidden !== "정의되지 않음") {
숨겨진 = "msHidden";
visibleChange = "msvisibilitychange";
상태 = "msVisibilityState";
} else if (typeof document.webkitHidden !== "정의되지 않음") {
숨겨진 = "webkitHidden";
visibleChange = "webkitvisibilitychange";
상태 = "webkitVisibilityState";
}

//제목에 상태 변경 사항을 표시하려면 리스너를 추가하세요
document.addEventListener(visibilityChange, function() {
document.title = 문서[상태];
}, 거짓);

//초기화
document.title = 문서[상태];

위 코드는 페이지 가시성이 변경되면 document.title 값을 수정합니다!

그럼 가시성 변경 이벤트는 언제 사용해야 할까요? 예를 들어, 페이지에 삽입된 비디오가 재생되는 경우 사용자가 다른 탭으로 전환하면 탭의 비디오는 사용자가 다시 전환할 때 자동으로 일시 중지되었다가 재생을 다시 시작해야 합니다. 또 다른 예로, 페이지에 자동 새로 고침 작업이 있는 경우 사용자가 다른 탭으로 전환하면 새로 고침을 중지하고 사용자가 다시 전환하면 이전 작업을 계속해야 합니다.