Utiliser l’API Javascript Page Visibility

L’API Page Visibility peut s’avérer très utile lorsque votre page web appelle un script, ou effectue une autre action en continu, durant la visite d’un utilisateur.

Grâce à cette fonctionnalité, on sait à chaque instant si la page est active ou non (utilisateur sur un autre onglet, navigateur réduit…).

Voici comment on peut l’utiliser :

var isWindowActive = true;

function handleVisibilityChange() {
	if(document.hidden){
		isWindowActive = false;
	}else{
		isWindowActive = true;
	}
}

var browserPrefixes = ['moz', 'ms', 'o', 'webkit'];
function getHiddenPropertyName(prefix){
	return (prefix ? prefix + 'Hidden' : 'hidden');
}
function getVisibilityEvent(prefix){
	return (prefix ? prefix : '') + 'visibilitychange';
}
function getBrowserPrefix(){
	for(var i=0; i<browserPrefixes.length; i++){
		if(getHiddenPropertyName(browserPrefixes[i]) in document){
			return browserPrefixes[i];
		}
	}
	return null;
}
var browserPrefix = getBrowserPrefix();

document.addEventListener(getVisibilityEvent(browserPrefix), handleVisibilityChange, false);

var isWindowActive = true;

function handleVisibilityChange() {

if(document.hidden){

isWindowActive = false;

}else{

isWindowActive = true;

}

var browserPrefixes = ['moz', 'ms', 'o', 'webkit'];

function getHiddenPropertyName(prefix){

return (prefix ? prefix + 'Hidden' : 'hidden');

}

function getVisibilityEvent(prefix){

return (prefix ? prefix : '') + 'visibilitychange';

}

function getBrowserPrefix(){

for(var i=0; i<browserPrefixes.length; i++){

if(getHiddenPropertyName(browserPrefixes[i]) in document){

return browserPrefixes[i];

}

return null;

}

var browserPrefix = getBrowserPrefix();

document.addEventListener(getVisibilityEvent(browserPrefix), handleVisibilityChange, false);

Avec ce code, la variable globale isWindowActive sera maintenue à jour, et vous pourrez l’utiliser pour effectuer un tâche ou non selon l’état actuel de la fenêtre.

var loop = setInterval(function(){
	if(isWindowActive){
		// do
	}else{
		// dont
	}
}, 10000);

var loop = setInterval(function(){

if(isWindowActive){

// do

}else{

// dont

}

}, 10000);

Source : StereoLogics.com : About the Page Visibility API