Learn ECMAScript - Second Edition

Page Visibility API - is the user still on the page?

The Page Visibility API allows developers to run specific code whenever the page user is on goes in focus or out of foucs. Imagine you run a game-hosting site and want to pause the game whenever the user loses focus on your tab. This is the way to go!

function pageChanged() {  if (document.hidden) {    console.log('User is on some other tab/out of focus') // line #1  } else {    console.log('Hurray! User returned') // line #2  }}document.addEventListener("visibilitychange", pageChanged);

We're adding an event listener to the document; it fires whenever the page is changed. Sure, the pageChanged function gets an event object as well in the argument, but we can simply use the document.hidden property, ...