html5에서 페이지 가시성 결정(코드 포함)

이 글의 내용은 HTML5(코드 포함)에서의 페이지 가시성 판단에 관한 내용입니다. 참고할만한 가치가 있으니 도움이 필요한 분들에게 도움이 되었으면 좋겠습니다.

visibilitychange 페이지 이벤트는 현재 페이지의 가시성 상태를 결정하고 특정 작업을 타겟 방식으로 수행합니다. visibilitychange页面事件来判断当前页面可见性的状态，并针对性的执行某些任务

document.hidden

新出现的document.hidden属性，它显示页面是否为用户当前观看的页面，值为ture或false。

document.visibilityState

visibilityState的值要么是visible (表明页面为浏览器当前激活tab，而且窗口不是最小化状态)，要么是hidden (页面不是当前激活tab页面，或者窗口最小化了。)，或者prerender

document.hidden

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

document.visibilityState

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

visibilitychange 이벤트

// 各种浏览器兼容 var hidden, state, visibilityChange; 
if (typeof document.hidden !== "undefined") { 
    hidden = "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";
 } 
// 添加监听器，在title里显示状态变化
document.addEventListener(visibilityChange, function() { 
    document.title = document[state]; }, false);
// 初始化 
document.title = document[state];

모니터링 추가

document.addEventListener("visibilitychange", function() {
  console.log( document.visibilityState );
});

document.addEventListener("msvisibilitychange", function() {
  console.log( document.msVisibilityState);
});

document.addEventListener("mozvisibilitychange", function() {
  console.log( document.mozVisibilityState);
});

document.addEventListener("webkitvisibilitychange", function() {
  console.log( document.webkitVisibilityState);
});

관련 추천 글:

PHP의 추상 메소드, 추상 클래스, 인터페이스에 대한 간략한 소개

🎜컨테이너(Container)와 파사드(Facade)란 무엇인가요? thinkphp5.1의 컨테이너 및 외관에 대한 간략한 분석 🎜🎜🎜 🎜thinkphp 템플릿이 모바일 WeChat 결제인지 WeChat 스캔 코드 결제인지 확인하는 방법 🎜🎜

위 내용은 html5에서 페이지 가시성 결정(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!