This post is a part 10 of Advanced JavaScript APIs post series.
This API is available for both mobile and desktop browsers.
Page visibility API can be used to find out weather the webpage is visible to the user or not.
Here is a look at Page visibility API
//document.hidden retuns true if page is not visible.
if("hidden" in document)
{
console.log("Hidden status: " + document.hidden);
}
else if("mozHidden" in document)
{
console.log("Hidden status: " + document.mozHidden);
}
else if("msHidden" in document)
{
console.log("Hidden status: " + document.msHidden);
}
else if("webkitHidden" in document)
{
console.log("Hidden status: " + document.webkitHidden);
}
else
{
console.log("Your browser doesn't support page visibility API");
}
//document.visibilityState retuns visible, hidden, prerender or unloaded.
//prerender means document content is being prerenderd and is not visible to the users.
//unloaded means page is being unloaded from memory.
if("visibilityState" in document)
{
console.log("Visibility State is : " + document.visibilityState);
}
else if("mozVisibilityState" in document)
{
console.log("Visibility State is : " + document.mozVisibilityState);
}
else if("msVisibilityState" in document)
{
console.log("Visibility State is : " + document.msVisibilityState);
}
else if("webkitVisibilityState" in document)
{
console.log("Visibility State is : " + document.webkitVisibilityState);
}
else
{
console.log("Your browser doesn't support page visibility API");
}
//this event is fired when value of document.hidden or document.visibilityState changes.
document.addEventListener("visibilitychange", function() {}, false);
document.addEventListener("mozvisibilitychange", function() {}, false);
document.addEventListener("msvisibilitychange", function() {}, false);
document.addEventListener("webkitvisibilitychange", function() {}, false);
if("hidden" in document)
{
console.log("Hidden status: " + document.hidden);
}
else if("mozHidden" in document)
{
console.log("Hidden status: " + document.mozHidden);
}
else if("msHidden" in document)
{
console.log("Hidden status: " + document.msHidden);
}
else if("webkitHidden" in document)
{
console.log("Hidden status: " + document.webkitHidden);
}
else
{
console.log("Your browser doesn't support page visibility API");
}
//document.visibilityState retuns visible, hidden, prerender or unloaded.
//prerender means document content is being prerenderd and is not visible to the users.
//unloaded means page is being unloaded from memory.
if("visibilityState" in document)
{
console.log("Visibility State is : " + document.visibilityState);
}
else if("mozVisibilityState" in document)
{
console.log("Visibility State is : " + document.mozVisibilityState);
}
else if("msVisibilityState" in document)
{
console.log("Visibility State is : " + document.msVisibilityState);
}
else if("webkitVisibilityState" in document)
{
console.log("Visibility State is : " + document.webkitVisibilityState);
}
else
{
console.log("Your browser doesn't support page visibility API");
}
//this event is fired when value of document.hidden or document.visibilityState changes.
document.addEventListener("visibilitychange", function() {}, false);
document.addEventListener("mozvisibilitychange", function() {}, false);
document.addEventListener("msvisibilitychange", function() {}, false);
document.addEventListener("webkitvisibilitychange", function() {}, false);
Leave a Reply