HTML5 visibleState attribute_html5 튜토리얼 기술의 자세한 소개 및 사용 예

이 "활성화"는 사용자가 이 라벨을 탐색하고 있는지, 아니면 현재 라벨인지 여부를 의미한다는 점을 여기서 설명해야 합니다.

그럼 이 API는 정확히 어떤 용도로 사용되나요? 일반적으로 많은 기존 페이지는 사용자가 활성화하지 않아도 계속 작동합니다. 예를 들어 사용자가 뉴스 포털을 검색할 때 이전에 열었던 NBA 게임 페이지는 최신 결과를 얻기 위해 계속 새로 고쳐지고 비디오 웹사이트는 계속해서 새로 고쳐집니다. 계속해서 대역폭을 점유하므로 불필요한 작업이 너무 많으면 리소스 낭비가 발생합니다. 따라서 이 제품은 매우 유용합니다.

1. 웹 프로그램은 사용자가 적시에 정보를 얻을 수 있도록 가끔씩 자동으로 페이지 정보를 업데이트합니다. 그러나 사용자가 다른 페이지를 탐색할 때 업데이트를 일시 중지하도록 제어할 수 있습니다.
2. 비디오 웹사이트는 비디오가 로드될 때까지 온라인 비디오를 재생할 때 비디오를 계속 로드합니다. 그러나 사용자가 다른 페이지를 탐색할 때 대역폭을 절약하기 위해 비디오 리소스 로드를 일시 중지할 수 있습니다.
3. 웹사이트 홈페이지에는 사용자가 다른 페이지를 탐색할 때 자동으로 재생되는 대형 슬라이드쇼가 있습니다.

따라서 페이지 가시성을 통해 다음 이점 중 하나 이상을 얻을 수 있습니다.

1. 서버 리소스를 절약합니다. Ajax 폴링과 같은 서버 리소스 사용량은 종종 무시됩니다. 이러한 유형의 요청은 리소스를 절약할 수 있습니다.
2. 메모리 사용량을 절약하세요.
3. 대역폭 소비를 절약하십시오.

따라서 페이지 가시성을 사용하면 사용자와 서버 모두에게 이점이 있습니다.

다음은 이 API에 대한 공식적인 소개입니다. 페이지 가시성은 브라우저의 문서 객체에 hided 및 visibleState라는 두 가지 속성을 추가합니다. 현재 태그가 활성화된 경우 document.hidden 값은 false 이고, 그렇지 않으면 true 입니다. visibleState에는 4개의 가능한 값이 있습니다:

1.hidden: 브라우저가 최소화되거나 탭이 전환되거나 컴퓨터가 잠기면 visibleState 값이 숨겨집니다
2.visible: 브라우저의 최상위 컨텍스트 문서가 하나 이상의 화면에 표시되면 visible이 반환되고, 브라우저 창이 최소화되지 않았지만 다른 애플리케이션에 의해 브라우저가 차단된 경우에도 표시됩니다
3.prerender: 문서가 화면 외부에 로드되거나 보이지 않을 때 사전 렌더링을 반환합니다. 이는 필수 속성이 아니며 브라우저에서 선택적으로 지원할 수 있습니다.
4.unloaded: 문서가 떠나려고 할 때(언로드) unloaded를 반환합니다. 브라우저는 선택적으로 이 속성을 지원할 수도 있습니다

또한 문서의 공개 여부가 변경되면 실행되는 공개 여부 변경 이벤트가 문서에 추가됩니다.

자, 속성을 소개한 후 사용 예를 넣어 보겠습니다(코드를 복사하여 HTML 파일에 저장한 후 열고 태그를 전환하여 효과를 테스트합니다).

코드 복사

코드는 다음과 같습니다.

<본문>

함수 browserKernel(){
var 결과;
['webkit', 'moz', 'o', 'ms'].forEach(function(prefix){

if( 문서 유형[ 접두사 '숨김' ] != '정의되지 않음' ){
결과 = 접두사;
}
});
결과 반환;
}
함수 초기화(){
접두사 = browerKernel();
var showTip = document.getElementById('showTip');
document.addEventListener( 접두사 'visibilitychange', 함수 onVisibilityChange(e){
var 팁 = null
if( document[ prefix 'VisibilityState' ] == 'hidden' )tip = '

페이지 나가기

';
else if( document[ prefix 'VisibilityState' ] == 'visible' )tip = '

페이지 입력

';
showTip.innerHTML = showTip.innerHTML 팁;
});
}
window.onload = init();