초기 브라우저에는 탭 브라우징 기능이 없었지만 현재 사용 가능한 모든 브라우저를 살펴보면 모든 브라우저가 이 기능을 제공한다는 것을 알 수 있습니다. 프로그래머로서 저는 보통 한 번에 10~15개의 탭을 열어 두고 있으며 때로는 이 숫자가 25~30개를 초과하기도 합니다.
이전에는 어떤 탭이 활성 상태인지, 어떤 탭이 활성 상태인지 확인할 방법이 없었지만 HTML5 Visibility API를 사용하면 방문자가 웹 페이지를 보고 있는지 감지할 수 있습니다.
이 튜토리얼에서는 HTML5 Visibility API를 처리하는 방법과 페이지 상태를 확인하는 간단한 데모를 알아봅니다. 이 데모에서는 페이지 가시성 상태에 따라 문서 제목을 변경합니다.
이 API의 출시로 두 가지 다른 기능을 제공하는 두 가지 새로운 문서 속성을 환영합니다. 첫 번째는 document.visibilityState，第二个是 document.hidden입니다.
document.visibilityState에는 다음과 같은 네 가지 값이 포함됩니다.
document.hidden은 페이지가 표시되면 false로 설정되고 페이지가 숨겨져 있으면 true로 설정되는 부울 속성입니다.
이제 웹사이트가 사용자에게 숨겨졌을 때 웹사이트가 어떻게 작동할지 제어할 수 있습니다.
가용성 속성을 바로 알았지만 이제 페이지 가시성과 관련된 새로운 상황을 알 수 있도록 이벤트를 들을 차례입니다. 이는 visibilitychange 이벤트를 통해 수행됩니다. 이 이벤트를 처리하는 방법에 대한 간단한 데모를 살펴보겠습니다.
이 코드는 이 이벤트를 활용하고 웹페이지의 현재 상태를 검색하는 기본적인 예일 뿐입니다. 하지만 아시다시피 이러한 이벤트와 속성은 일부 브라우저에서 공급업체 접두사가 붙기 때문에 이러한 속성과 메서드에는 모두 공급업체 접두사가 붙어야 합니다. 이제 브라우저 간에 동일한 코드가 표시됩니다.
으아아아모든 브라우저 접두사 속성이 있고 이벤트를 적용할 준비가 되었습니다. 이제 이에 따라 이전 코드를 변경하겠습니다.
으아아아우리는 다양한 시나리오에서 이 API 사용을 고려할 수 있습니다.
지금까지 HTML5 Page Visibility API를 사용하는 코드를 살펴보았습니다. 이제 즉각적인 조치를 취해야 할 때입니다.
이 데모에서는 사용자가 페이지를 보고 있는 동안에만 최신 정보에 대한 서버 폴링을 제한하는 방법을 살펴보겠습니다. 귀하의 페이지에 jQuery가 이미 포함되어 있다고 가정합니다. 여기서는 개수만 증가시키겠지만 이는 실제 서버 폴링으로 대체될 수 있습니다.
으아아아
으아아아
데모 보기
이 API에 대한 브라우저 지원을 확인하려면 Can I use it?을 확인하는 것이 좋습니다. . 그러나 프로그래밍 방식으로 브라우저 지원을 찾으려면 이 문서를 읽고 다양한 HTML5 기능에 대한 지원을 검색하는 것이 좋습니다. 지금까지 우리는 거의 모든 주요 브라우저와 최신 브라우저에서 이 API를 훌륭하게 지원했습니다.
두 개의 속성과 하나의 이벤트로만 구성된 매우 훌륭한 API가 있다고 말하고 싶습니다. 이러한 방식으로 기존 애플리케이션과 쉽게 통합될 수 있으며 이는 사용자 경험에 긍정적인 영향을 미칠 수 있습니다. 마지막으로, 이제 사이트가 사용자에게 숨겨졌을 때 사이트가 어떻게 작동하는지 제어할 수 있습니다.
위 내용은 HTML5 페이지 가시성 API를 사용하여 페이지 가시성 제어 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
