API pro viditelnost stránky

Jedna událost, která v dokumentu vždy chyběla, je signál, kdy se uživatel dívá na danou nebo jinou kartu. Kdy uživatel vypne naše stránky, aby se podíval na něco jiného? Kdy se vrátí? Rozhraní API pro viditelnost stránky umožňuje vývojářům reagovat na změny viditelnosti stránky prostřednictvím visibilitychange document událost. Nový document.hidden a document.visibilityChange vlastnosti jsou také k dispozici.

document.hidden

Tato nová vlastnost dokumentu, document.hidden , vrátí true stránka aktuálně není viditelná.

document.visibilityState

visibilityState bude buď visible (stránka je záložkou popředí neminimalizovaného okna), hidden (dokument je buď karta na pozadí nebo část minimalizovaného okna), nebo prerender (obsah stránky se předvykresluje a uživatel jej nevidí).

Událost změny viditelnosti

Poslech změn ve viditelnosti okna je stejně snadný jako:

// Adapted slightly from Sam Dutton
// Set name of hidden property and visibility change event
// since some browsers only offer vendor-prefixed support
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";
}

// Add a listener that constantly changes the title
document.addEventListener(visibilityChange, function() {
	document.title = document[state];
}, false);

// Set the initial value
document.title = document[state];

Výše uvedený příklad mění document.title vlastnost při každé změně viditelnosti!

Podpora visibilityChange v MooTools

MooTools nepodporuje visibilityChange po vybalení, takže budete muset přidat tento kousek JavaScriptu:

// Set it up!
Element.NativeEvents[visibilityChange] = 2;
Element.Events[visibilityChange] = {
	base: visibilityChange,
	condition: function(event) {
		event[state] = document[state];
		event.visibilityState = document[state];
		return true;
	}
};

// Now use it!
document.addEvent(visibilityChange, function(e) {
	document.title = document[state];
});

Nemáš rád, když je to tak snadné?! Toto zrcadlí kód potřebný k přidání onMessage události do seznamu podporovaných událostí.

Co by tedy mohlo visibilitychange být použit pro? Můžete zastavit pravidelné obnovování obsahu, když stránka již není viditelná, a poté vytáhnout nový obsah, když se stránka znovu zviditelní. Během změn viditelnosti můžete video pozastavit a obnovit. Zvuk také. Statistiky webu můžete upravit tak, aby se počítala pouze doba strávená na webu, když je stránka viditelná. Je toho spousta, co můžete dělat! Takže...otázka je...co byste s tím udělali?