JavaScript: How to return True if the focus is on the browser tab page?

Javascript Web Development Front End Technology

In this article, we are going to explore how to check if the browser tab page is focused and under use or not. This is mainly required to record the user’s inactivity time on the app and then take any action upon it if required.

It can be useful in some other situations also −

Prevent sending the network request if the page is not being used by the user as this would reduce the traffic on the server.
Also, this would really help in saving the cost of the servers.

This is used while monitoring the time spent by each user and then calculating different statistics based on these values.

For implementing this functionality, we have 2 methods which are discussed below −

Page Visibility API
The window.onfocus and w indow.onblur events

Using Page Visib ility API

The visibility API is provided by HTML 5 that lets the developer know if the tab is currently visible or not. The API sends a visibility change event when the user minimizes the window or switches this window to some other tab. This API adds the below two properties to the DOM object which can be only read.

document.hidden hidden − This property returns false when the current tab is ‘visible’, else it will return true.
document.visibility visibility − This property returns a string that indicates about the document’s current visibility state. Its possible values are visible, hidden, prerender, and unloaded.

Example 1

In the below example, we are checking if the browser tab page is in focus or not when the user switches the tab or minimizes the window.

# index.html

<!DOCTYPE html>
<html>
<head>
   <title>Page Focus</title>
   <style>
   .btn_container {
      padding: 10px;
      text-align: center;
   }
   #btn {
      border-radius: 4px;
      cursor: pointer;
      padding: 4px 8px;
      background-color: white;
      font-size: 1.2em;
      letter-spacing: 1px;
   }
   </style>
</head>
<body style="text-align: center;">
   <h1 style="color:green;">Welcome To Tutorials Point</h1>
   <h2 id="txt">Switch tab to change the background color.</h2>
   <div class="btn_container">
      <button id="btn">Original Color</button>
   </div>
<script>
   const ogcolor = "white";
   const newcolor = "#C0C0C0";
   const txt = document.getElementById("txt");
   const btn = document.getElementById("btn");
   document.addEventListener("visibilitychange", function (event) {
      if (document.hidden) {
         document.body.style.backgroundColor = newcolor;
         txt.innerText = "Background color has changed !";
      }
   });
   btn.addEventListener("click", function () {
      txt.innerText = "Switch tab to change the background color.";
      document.body.style.backgroundColor = ogcolor;
   });
</script>
</body>
</html>

Output

Using the window.onfocus and wnindow.onblur Events

window.onfocus − This event is fired when the tab receives the focus.
window.onblur − The blur event is fired when the user performs any action on some other place.

Example 2

In the below example, we are checking if the browser tab page is in focus or not by using the onFocus and onBlur method.

# index.html

<!DOCTYPE html>
<html>
<head>
   <title>Page Focus</title>
   <style>
   .btn_container {
      padding: 10px;
      text-align: center;
   }
   #btn {
      border-radius: 4px;
      cursor: pointer;
      padding: 4px 8px;
      background-color: white;
      font-size: 1.2em;
      letter-spacing: 1px;
   }
   </style>
</head>
<body style="text-align: center;">
   <h1 style="color:green;">Welcome To Tutorials Point</h1>
   <h2 id="txt">Switch tab to change the background color.</h2>
   <div class="btn_container">
      <button id="btn">Original Color</button>
   </div>
<script>
   const ogcolor = "white";
   const newcolor = "#C0C0C0";
   const txt = document.getElementById("txt");
   const btn = document.getElementById("btn");
   document.addEventListener("visibilitychange", function (event) {
      if (document.hidden) {
         document.body.style.backgroundColor = newcolor;
         txt.innerText = "Background color has changed !";
      }
   });
   btn.addEventListener("click", function () {
      txt.innerText = "Switch tab to change the background color.";
      document.body.style.backgroundColor = ogcolor;
   });
</script>
</body>
</html>