Determining page visibility in html5 (with code)

The content of this article is about the judgment of page visibility in HTML5 (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

visibilitychangePage events are used to determine the visibility status of the current page and perform certain tasks accordingly

document.hidden

Newly appeared document.hiddenAttribute, which shows whether the page is the page currently viewed by the user, the value is true or false. The value of

document.visibilityState

visibilityState is either visible (indicating that the page is the currently activated tab of the browser and the window is not minimized) , either hidden (the page is not the currently active tab page, or the window is minimized.), or prerender (the page is being regenerated and is not visible to the user.).

visibilitychange event

// 各种浏览器兼容 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];

Add monitoring

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);
});

Recommended related articles:

A brief introduction to abstract methods, abstract classes and interfaces in PHP

What are containers (Container) and facades (Facade)? A brief analysis of containers and facades in thinkphp5.1

How do thinkphp templates determine whether mobile WeChat payment or WeChat scan code payment

The above is the detailed content of Determining page visibility in html5 (with code). For more information, please follow other related articles on the PHP Chinese website!