Skip to main content

Whenever a user opens a new tab or navigates to another tab, the behavior of the current page from which user navigated can be controlled using this API.

<!DOCTYPE HTML>
<html>
<head>
<title>Using HTML5's PageVisibility API</title>
  <script type="text/javascript">
  timer = 0;

  function onLoad() {
    document.addEventListener("visibilitychange", stateChanged);
    document.addEventListener("webkitvisibilitychange", stateChanged);
    document.addEventListener("msvisibilitychange", stateChanged);
  }

  function stateChanged() {
    if (document.hidden || document.webkitHidden || document.msHidden) {
      //new tab or window minimized
      timer = new Date().getTime();
    } else {
      alert('You were away for ' + (new Date().getTime() - timer) / 1000 + ' seconds.')
    }
  }
  </script>
</head>
<body onLoad="onLoad()">

</body>
</html>