HTML5 페이지 가시성 API를 사용하여 페이지 가시성 제어 구현

초기 브라우저에는 탭 브라우징 기능이 없었지만 현재 사용 가능한 모든 브라우저를 살펴보면 모든 브라우저가 이 기능을 제공한다는 것을 알 수 있습니다. 프로그래머로서 저는 보통 한 번에 10~15개의 탭을 열어 두고 있으며 때로는 이 숫자가 25~30개를 초과하기도 합니다.

이 API를 사용하는 이유는 무엇인가요?

이전에는 어떤 탭이 활성 상태인지, 어떤 탭이 활성 상태인지 확인할 방법이 없었지만 HTML5 Visibility API를 사용하면 방문자가 웹 페이지를 보고 있는지 감지할 수 있습니다.

이 튜토리얼에서는 HTML5 Visibility API를 처리하는 방법과 페이지 상태를 확인하는 간단한 데모를 알아봅니다. 이 데모에서는 페이지 가시성 상태에 따라 문서 제목을 변경합니다.

페이지 공개 상태 확인

이 API의 출시로 두 가지 다른 기능을 제공하는 두 가지 새로운 문서 속성을 환영합니다. 첫 번째는 document.visibilityState，第二个是 document.hidden입니다.

document.visibilityState에는 다음과 같은 네 가지 값이 포함됩니다.

• 숨기기: 페이지가 어떤 화면에도 표시되지 않습니다
• 사전 렌더링: 페이지가 화면 밖에서 로드되어 사용자에게 보이지 않습니다

• 표시됨: 페이지 표시됨

• 언로드됨: 페이지가 언로드되려고 합니다(사용자가 현재 페이지를 떠나고 있습니다)

document.hidden은 페이지가 표시되면 false로 설정되고 페이지가 숨겨져 있으면 true로 설정되는 부울 속성입니다.

이제 웹사이트가 사용자에게 숨겨졌을 때 웹사이트가 어떻게 작동할지 제어할 수 있습니다.

가용성 속성을 바로 알았지만 이제 페이지 가시성과 관련된 새로운 상황을 알 수 있도록 이벤트를 들을 차례입니다. 이는 visibilitychange 이벤트를 통해 수행됩니다. 이 이벤트를 처리하는 방법에 대한 간단한 데모를 살펴보겠습니다.

으아아아

이 코드는 이 이벤트를 활용하고 웹페이지의 현재 상태를 검색하는 기본적인 예일 뿐입니다. 하지만 아시다시피 이러한 이벤트와 속성은 일부 브라우저에서 공급업체 접두사가 붙기 때문에 이러한 속성과 메서드에는 모두 공급업체 접두사가 붙어야 합니다. 이제 브라우저 간에 동일한 코드가 표시됩니다.

으아아아

모든 브라우저 접두사 속성이 있고 이벤트를 적용할 준비가 되었습니다. 이제 이에 따라 이전 코드를 변경하겠습니다.

으아아아

이 API를 어디에서 사용할 수 있나요?

우리는 다양한 시나리오에서 이 API 사용을 고려할 수 있습니다.

1. 대시보드에 있고 페이지가 일부 RSS 피드 또는 API에 대한 세부 정보를 정기적으로(예: 2분) 폴링하고 있다고 가정해 보겠습니다. 따라서 페이지가 사용자에게 표시되지 않는 경우(즉, 사용자가 실제로 페이지를 보고 있지 않은 경우) RSS 피드 또는 API에 대한 호출을 제한할 수 있습니다.
2. 이미지 슬라이더용. 페이지가 숨겨져 있을 때 슬라이더 이미지의 움직임을 제한할 수 있습니다.

3. 비슷한 방식으로 페이지가 사용자에게 숨겨져 있을 때만 HTML 알림을 표시할 수 있습니다.

지금까지 HTML5 Page Visibility API를 사용하는 코드를 살펴보았습니다. 이제 즉각적인 조치를 취해야 할 때입니다.

데모

• 데모 1: 이 데모에서는 Page Visibility API를 사용하여 페이지 제목을 변경하는 방법을 보여줍니다. 데모 보기
• 데모 2: 이 데모는 페이지가 비활성 상태일 때 서버에서 폴링 데이터를 제한하는 방법을 보여줍니다.

이 데모에서는 사용자가 페이지를 보고 있는 동안에만 최신 정보에 대한 서버 폴링을 제한하는 방법을 살펴보겠습니다. 귀하의 페이지에 jQuery가 이미 포함되어 있다고 가정합니다. 여기서는 개수만 증가시키겠지만 이는 실제 서버 폴링으로 대체될 수 있습니다.

HTML

으아아아

자바스크립트

으아아아

데모 보기

브라우저 지원

이 API에 대한 브라우저 지원을 확인하려면 Can I use it?을 확인하는 것이 좋습니다. . 그러나 프로그래밍 방식으로 브라우저 지원을 찾으려면 이 문서를 읽고 다양한 HTML5 기능에 대한 지원을 검색하는 것이 좋습니다. 지금까지 우리는 거의 모든 주요 브라우저와 최신 브라우저에서 이 API를 훌륭하게 지원했습니다.

결론

두 개의 속성과 하나의 이벤트로만 구성된 매우 훌륭한 API가 있다고 말하고 싶습니다. 이러한 방식으로 기존 애플리케이션과 쉽게 통합될 수 있으며 이는 사용자 경험에 긍정적인 영향을 미칠 수 있습니다. 마지막으로, 이제 사이트가 사용자에게 숨겨졌을 때 사이트가 어떻게 작동하는지 제어할 수 있습니다.

위 내용은 HTML5 페이지 가시성 API를 사용하여 페이지 가시성 제어 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!