댓글 : 사용자가 지정된 탭을 탐색하는지 여부를 결정하는 메소드가 오랫동안 누락되었습니다. 사용자가 다른 웹 사이트를 방문 했습니까? 그들은 뒤로 바뀌 었습니까?
이제 HTML5의 페이지 가시성 인터페이스는 프로그래머에게 VisibilityChange Page 이벤트를 사용하여 현재 페이지 가시성 상태를 판단하고 특정 작업을 대상 방식으로 수행하는 방법을 제공합니다. 새로운 문서도 있습니다.
문서 .hidden
이 새로 인정 된이 문서 .hidden 속성은 페이지가 현재 사용자가보고있는 페이지인지, ture 또는 false의 값을 보여줍니다.
문서 .VisibilityState
VisibilityState의 값은 가시적입니다 (현재 페이지가 브라우저에서 활성화되고 창이 최소화되지 않았 음을 나타냅니다) 또는 숨겨진 (페이지가 현재 탭 페이지에서 활성화되지 않았거나 창이 최소화되지 않습니다.) (페이지가 재생되고 사용자에게는 보이지 않습니다).
VisibilityChange 이벤트
페이지 가시성 변경 사항을 듣는 것은 매우 쉽습니다.
// 다양한 브라우저와 호환됩니다
var hidden, state, VisibilityChange;
if (typeof document.hidden! == "undefined") {
hidden = "숨겨진";
VisibilityChange = "VisibilityChange";
state = "VisibilityState";
} else if (typeof document.mozhidden! == "undefined") {
hidden = "Mozhidden";
VisibilityChange = "MozvisibilityChange";
state = "MozvisibilityState";
} else if (typeof document.mshidden! == "undefined") {
hidden = "mshidden";
VisibilityChange = "MSVisibilityChange";
state = "msvisibilitystate";
} else if (typeof document.webkithidden! == "undefined") {
hidden = "webkithidden";
VisibilityChange = "webKitVisibilityChange";
state = "webKitVisibilityState";
} </p> <p> // 제목의 표시 상태 변경에 리스너 추가
document.addeventListener (VisibilityChange, function () {
문서화 = 문서 [state];
}, false); </p> <p> // 초기화
문서화 = 문서 [state];
위의 코드는 문서의 값을 수정합니다. 페이지 가시성이 변경 될 때 테이틀!
그렇다면 언제 VisibilityChange 이벤트를 사용해야합니까? 예를 들어, 페이지에 재생되는 비디오가있는 경우 사용자가 다른 탭으로 전환 할 때 탭의 비디오가 재생을 자동으로 일시 중지하고 사용자가 다시 전환 할 때 계속 재생해야합니다. 예를 들어, 페이지에 자동 새로 고침 작업이있는 경우 사용자가 다른 탭으로 전환 할 때는 새로 고침을 중지하고 사용자가 다시 전환 할 때 이전 작업을 계속해야합니다.