L'evento visibilitychange è stato introdotto con le relative API del W3C per gestire la visibilità dei tab dei browser. Questo evento si innesca quando un altro tab viene aperto nel browser ed il tab corrente passa in secondo piano.
L'evento si usa in questo modo:
document.addEventListener( "visibilitychange", () => {
const visibility = document.visibilityState;
console.log( visibility ); // hidden, visible, prerender
});
Il valore prerender indica una fase intermedia della visibilità di un tab. Questo evento in genere si usa in tandem con la
proprietà booleana document.hidden:
document.addEventListener( "visibilitychange", () => {
const video = document.querySelector( "#movie" );
if( document.hidden ) {
video.pause();
} else {
video.play();
}
});
I browser, tranne le più recenti versioni di Firefox, usano i loro prefissi sia per questo evento che per la loro proprietà. Quindi:
let hidden, visibilityChange;
if ( typeof document.hidden !== "undefined" ) {
hidden = "hidden";
visibilityChange = "visibilitychange";
} else if ( typeof document.mozHidden !== "undefined" ) {
hidden = "mozHidden";
visibilityChange = "mozvisibilitychange";
} else if ( typeof document.msHidden !== "undefined" ) {
hidden = "msHidden";
visibilityChange = "msvisibilitychange";
} else if ( typeof document.webkitHidden !== "undefined" ) {
hidden = "webkitHidden";
visibilityChange = "webkitvisibilitychange";
}
document.addEventListener( visibilityChange, () => {
const video = document.querySelector( "#movie" );
if( document[hidden] ) {
video.pause();
} else {
video.play();
}
});